1
Ich versuche, die Sichtbarkeit der kleineren Elemente des FAB zu steuern, nach der gif unter:Flutter - Float Aktion Button - Ausblenden die Sichtbarkeit von Elementen
Allerdings bin ich nicht in der Lage um die opacity in die Artikel einzufügen. Überall dort, wo ich eine Art von Fehler einstelle, tritt auf. Ich weiß nicht, ob opacity der beste Weg ist, es zu tun.
Um die Elemente auszublenden, glaube ich, dass mit Animation es möglich ist, die Zeit zu steuern, in der sie angezeigt werden.
Unten ist das, was ich bisher erreicht haben:
Können Sie mir helfen, dieses Problem zu lösen?
Unten ist der oben gif Code:
import 'package:flutter/animation.dart';
import 'package:flutter/material.dart';
void main() {
runApp(new MaterialApp(home: new HomePage()));
}
class HomePage extends StatefulWidget {
@override
HomePageState createState() => new HomePageState();
}
class HomePageState extends State<HomePage> with TickerProviderStateMixin {
int _angle = 90;
bool _isRotated = true;
void _rotate(){
setState((){
if(_isRotated) {
_angle = 45;
_isRotated = false;
} else {
_angle = 90;
_isRotated = true;
}
});
}
@override
Widget build(BuildContext context) {
return new Scaffold(
body: new Stack(
children: <Widget>[
new Positioned(
bottom: 200.0,
right: 24.0,
child: new Container(
child: new Row(
children: <Widget>[
new Container(
margin: new EdgeInsets.only(right: 16.0),
child: new Text(
'foo1',
style: new TextStyle(
fontSize: 13.0,
fontFamily: 'Roboto',
color: new Color(0xFF9E9E9E),
fontWeight: FontWeight.bold,
),
),
),
new Material(
color: new Color(0xFF9E9E9E),
type: MaterialType.circle,
elevation: 6.0,
child: new GestureDetector(
child: new Container(
width: 40.0,
height: 40.0,
child: new InkWell(
onTap:(){},
child: new Center(
child: new Icon(
Icons.add,
color: new Color(0xFFFFFFFF),
),
),
)
),
)
),
],
),
)
),
new Positioned(
bottom: 144.0,
right: 24.0,
child: new Container(
child: new Row(
children: <Widget>[
new Container(
margin: new EdgeInsets.only(right: 16.0),
child: new Text(
'foo2',
style: new TextStyle(
fontSize: 13.0,
fontFamily: 'Roboto',
color: new Color(0xFF9E9E9E),
fontWeight: FontWeight.bold,
),
),
),
new Material(
color: new Color(0xFF00BFA5),
type: MaterialType.circle,
elevation: 6.0,
child: new GestureDetector(
child: new Container(
width: 40.0,
height: 40.0,
child: new InkWell(
onTap:(){},
child: new Center(
child: new Icon(
Icons.add,
color: new Color(0xFFFFFFFF),
),
),
)
),
)
),
],
),
)
),
new Positioned(
bottom: 88.0,
right: 24.0,
child: new Container(
child: new Row(
children: <Widget>[
new Container(
margin: new EdgeInsets.only(right: 16.0),
child: new Text(
'foo3',
style: new TextStyle(
fontSize: 13.0,
fontFamily: 'Roboto',
color: new Color(0xFF9E9E9E),
fontWeight: FontWeight.bold,
),
),
),
new Material(
color: new Color(0xFFE57373),
type: MaterialType.circle,
elevation: 6.0,
child: new GestureDetector(
child: new Container(
width: 40.0,
height: 40.0,
child: new InkWell(
onTap:(){},
child: new Center(
child: new Icon(
Icons.add,
color: new Color(0xFFFFFFFF),
),
),
)
),
)
),
],
),
)
),
new Positioned(
bottom: 16.0,
right: 16.0,
child: new Material(
color: new Color(0xFFE57373),
type: MaterialType.circle,
elevation: 6.0,
child: new GestureDetector(
child: new Container(
width: 56.0,
height: 56.00,
child: new InkWell(
onTap: _rotate,
child: new Center(
child: new RotationTransition(
turns: new AlwaysStoppedAnimation(_angle/360),
child: new Icon(
Icons.add,
color: new Color(0xFFFFFFFF),
),
)
),
)
),
)
),
),
]
)
);
}
}
Ist das animierte Gif Sie die erwartete/gewünschte Verhalten eingefügt? Was in deinem Code sollte deiner Ansicht nach von der Ansicht mit foo1/foo2/foo3 zur anderen Ansicht führen? (Das animierte Gif und Ihr Code sind unterschiedliche Sprachen, daher ist es schwer zu verstehen, was Sie versuchen zu tun). Bitte klären Sie; Ein mehr Barebone-Beispiel würde helfen. – mzimmermann
Das letzte Ziel ist gif, aber was ich in erster Linie brauchen würde, ist 'foo1' versteckt zu lassen, so dass es nach dem Tippen erscheint. Bis jetzt habe ich nichts gefunden, um mir zu helfen, die Visualität des Widgets mit Flutter – rafaelcb21
zu kontrollieren Nicht sicher, dass dies hilft, in Ihrem Endziel, aber: Sie könnten den tap auf setState binden, und dann build() wird dieses Mal wieder aufgerufen das foo1 überspringen (nicht addieren) (grundsätzlich würde das Vorhandensein von foo1 auf einer Bedingung basieren). Wenn Sie foo1 behalten müssen, ersetzen Sie es durch einen leeren Behälter der gleichen Größe (aber die gleiche Größe wäre in der Regel ein Schmerz, denke ich). – mzimmermann