widgets auf Flutter programmatisch anzeigen/ausblenden
Unter Android verfügt jede View-Unterklasse über eine "setVisibility" -Methode, mit der Sie die Sichtbarkeit eines View-Objekts ändern können
Es gibt drei Möglichkeiten, die Sichtbarkeit einzustellen:
- visibile: Macht die Ansicht im Layout sichtbar
- unsichtbar: Blendet die Ansicht aus, hinterlässt jedoch eine Lücke, die der Sicht der Ansicht entspricht, wenn sie sichtbar wäre
- gone: Blendet die Ansicht aus und entfernt sie vollständig aus dem Layout. Es ist, als ob seine Höhe und Breite 0 dB wären
Gibt es etwas Gleichwertiges zu Widgets in Flutter?
Für eine schnelle Referenz: https://developer.Android.com/reference/Android/view/View.html#attr_Android:visibility
Sie können Opacity mit einem opacity: von 0.0 verwenden, um ein Element verborgen zu machen, aber dennoch Platz zu beanspruchen.
Ersetzen Sie es durch ein leeres Container(), damit es keinen Platz einnimmt.
BEARBEITEN: Um es in ein Opacity-Objekt einzuwickeln, führen Sie folgende Schritte aus:
new Opacity(opacity: 0.0, child: new Padding(
padding: const EdgeInsets.only(
left: 16.0,
),
child: new Icon(pencil, color: CupertinoColors.activeBlue),
))
Schnelle Anleitung für Google-Entwickler zu Opazität: https://youtu.be/9hltevOHQBw
Um mit der Frage zusammenzuarbeiten und ein Beispiel für das Ersetzen der Frage durch ein leeres Container() anzuzeigen.
Hier ist das Beispiel unten:
import "package:flutter/material.Dart";
void main() {
runApp(new ControlleApp());
}
class ControlleApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: "My App",
home: new HomePage(),
);
}
}
class HomePage extends StatefulWidget {
@override
HomePageState createState() => new HomePageState();
}
class HomePageState extends State<HomePage> {
bool visibilityTag = false;
bool visibilityObs = false;
void _changed(bool visibility, String field) {
setState(() {
if (field == "tag"){
visibilityTag = visibility;
}
if (field == "obs"){
visibilityObs = visibility;
}
});
}
@override
Widget build(BuildContext context){
return new Scaffold(
appBar: new AppBar(backgroundColor: new Color(0xFF26C6DA)),
body: new ListView(
children: <Widget>[
new Container(
margin: new EdgeInsets.all(20.0),
child: new FlutterLogo(size: 100.0, colors: Colors.blue),
),
new Container(
margin: new EdgeInsets.only(left: 16.0, right: 16.0),
child: new Column(
children: <Widget>[
visibilityObs ? new Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
new Expanded(
flex: 11,
child: new TextField(
maxLines: 1,
style: Theme.of(context).textTheme.title,
decoration: new InputDecoration(
labelText: "Observation",
isDense: true
),
),
),
new Expanded(
flex: 1,
child: new IconButton(
color: Colors.grey[400],
icon: const Icon(Icons.cancel, size: 22.0,),
onPressed: () {
_changed(false, "obs");
},
),
),
],
) : new Container(),
visibilityTag ? new Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
new Expanded(
flex: 11,
child: new TextField(
maxLines: 1,
style: Theme.of(context).textTheme.title,
decoration: new InputDecoration(
labelText: "Tags",
isDense: true
),
),
),
new Expanded(
flex: 1,
child: new IconButton(
color: Colors.grey[400],
icon: const Icon(Icons.cancel, size: 22.0,),
onPressed: () {
_changed(false, "tag");
},
),
),
],
) : new Container(),
],
)
),
new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new InkWell(
onTap: () {
visibilityObs ? null : _changed(true, "obs");
},
child: new Container(
margin: new EdgeInsets.only(top: 16.0),
child: new Column(
children: <Widget>[
new Icon(Icons.comment, color: visibilityObs ? Colors.grey[400] : Colors.grey[600]),
new Container(
margin: const EdgeInsets.only(top: 8.0),
child: new Text(
"Observation",
style: new TextStyle(
fontSize: 12.0,
fontWeight: FontWeight.w400,
color: visibilityObs ? Colors.grey[400] : Colors.grey[600],
),
),
),
],
),
)
),
new SizedBox(width: 24.0),
new InkWell(
onTap: () {
visibilityTag ? null : _changed(true, "tag");
},
child: new Container(
margin: new EdgeInsets.only(top: 16.0),
child: new Column(
children: <Widget>[
new Icon(Icons.local_offer, color: visibilityTag ? Colors.grey[400] : Colors.grey[600]),
new Container(
margin: const EdgeInsets.only(top: 8.0),
child: new Text(
"Tags",
style: new TextStyle(
fontSize: 12.0,
fontWeight: FontWeight.w400,
color: visibilityTag ? Colors.grey[400] : Colors.grey[600],
),
),
),
],
),
)
),
],
)
],
)
);
}
}
Invisible: Das Widget nimmt physischen Platz auf dem Bildschirm ein, ist aber für den Benutzer nicht sichtbar.
Gone: Das Widget nimmt keinen physischen Platz ein und ist vollständig weg.
Aktualisieren
Flutter fügte ein neues Widget mit dem Namen Visibility hinzu.
Unsichtbares Beispiel
Visibility(
child: Container(color: Colors.blue, width: 100, height: 100),
maintainSize: true,
maintainAnimation: true,
maintainState: true,
visible: false,
),
Gone-Beispiel
Visibility(
child: Container(color: Colors.blue, width: 100, height: 100),
visible: false,
),
Alte Lösung
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text("My app"),),
body: HomePage(),
),
);
}
}
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
double opacity = 1.0;
bool visible = true;
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
Row(
children: <Widget>[
Expanded(child: Opacity(opacity: opacity, child: Container(color: Colors.orange, height: 40.0,),),),
visible ? Expanded(child: Container(color: Colors.green, height: 40.0,),) : Container(),
],
),
Row(
children: <Widget>[
Expanded(child: RaisedButton(child: Text("Invisible"), onPressed: _hide,),),
Expanded(child: RaisedButton(child: Text("Gone"), onPressed: _gone,),)
],
),
],
);
}
void _hide() {
setState(() => opacity = opacity == 0.0 ? 1.0 : 0.0);
}
void _gone() {
setState(() => visible = !visible);
}
}
In flattern 1.5 und Dart 2. für Sichtbarkeit weg können Sie die Sichtbarkeit festlegen, indem Sie eine if-Anweisung in der Sammlung verwenden, ohne Container verwenden zu müssen.
z. B.
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('This is text one'),
if (_isVisible) Text('can be hidden or shown'), // no dummy container/ternary needed
Text('This is another text'),
RaisedButton(child: Text('show/hide'), onPressed: (){
setState(() {
_isVisible = !_isVisible;
});
},)
],
)
Flutter enthält jetzt ein Visibility Widget , das Sie zum Anzeigen/Ausblenden von Widgets verwenden sollten. Das Widget kann auch verwendet werden, um zwischen zwei Widgets zu wechseln, indem die Ersetzung geändert wird.
Dieses Widget kann alle sichtbaren, unsichtbaren, verschwundenen Zustände und vieles mehr erreichen.
Visibility(
visible: true //Default is true,
child: Text('Ndini uya uya'),
//maintainSize: bool. When true this is equivalent to invisible;
//replacement: Widget. Defaults to Sizedbox.shrink, 0x0
),
Probieren Sie das Widget "Offstage" aus, wenn das Attribut offstage: true den physischen Raum nicht einnehmen und unsichtbar ist, wenn das Attribut offstage: false den physischen Raum einnehmen und sichtbar ist
Hinter den Kulissen (hinter den Kulissen: true, child: Text ("Visible"),)
Machen Sie selbst ein Widget.
anzeigen Ausblenden
class ConditionallyShowContainer extends StatelessWidget {
final Widget child;
final bool show;
ConditionallyShowContainer({this.child, this.show});
@override
Widget build(BuildContext context) {
return Opacity(opacity: this.show ? 1.0 : 0.0, child: this.child);
}
}
zeigen/entfernen
class ConditionallyRenderContainer extends StatelessWidget {
final Widget child;
final bool show;
ConditionallyRenderContainer({this.child, this.show});
@override
Widget build(BuildContext context) {
return this.show ? this.child : Container();
}
}
Gibt es übrigens einen besseren Namen für die oben genannten Widgets?
bool _visible = false;
void _toggle() {
setState(() {
_visible = !_visible;
});
}
onPressed: _toggle,
Visibility(
visible:_visible,
child: new Container(
child: new Container(
padding: EdgeInsets.fromLTRB(15.0, 0.0, 15.0, 10.0),
child: new Material(
elevation: 10.0,
borderRadius: BorderRadius.circular(25.0),
child: new ListTile(
leading: new Icon(Icons.search),
title: new TextField(
controller: controller,
decoration: new InputDecoration(
hintText: 'Search for brands and products', border: InputBorder.none,),
onChanged: onSearchTextChanged,
),
trailing: new IconButton(icon: new Icon(Icons.cancel), onPressed: () {
controller.clear();
onSearchTextChanged('');
},),
),
),
),
),
),
Für Anfänger versuchen Sie das auch.
class Visibility extends StatefulWidget {
@override
_VisibilityState createState() => _VisibilityState();
}
class _VisibilityState extends State<Visibility> {
bool a = true;
String mText = "Press to hide";
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: "Visibility",
home: new Scaffold(
body: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new RaisedButton(
onPressed: _visibilitymethod, child: new Text(mText),),
a == true ? new Container(
width: 300.0,
height: 300.0,
color: Colors.red,
) : new Container(),
],
)
),
);
}
void _visibilitymethod() {
setState(() {
if (a) {
a = false;
mText = "Press to show";
} else {
a = true;
mText = "Press to hide";
}
});
}
}
Wie bereits von @CopsOnRoad hervorgehoben, können Sie das Sichtbarkeits-Widget verwenden. Wenn Sie jedoch den Status beibehalten möchten, z. B. einen Viewpager erstellen und eine bestimmte Schaltfläche basierend auf der Seite ein- und ausblenden möchten, können Sie dies auf diese Weise tun
void checkVisibilityButton() {
setState(() {
isVisibileNextBtn = indexPage + 1 < pages.length;
});
}
Stack(children: <Widget>[
PageView.builder(
itemCount: pages.length,
onPageChanged: (index) {
indexPage = index;
checkVisibilityButton();
},
itemBuilder: (context, index) {
return pages[index];
},
controller: controller,
),
Container(
alignment: Alignment.bottomCenter,
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Visibility(
visible: isVisibileNextBtn == true ? true : false,
child: "your widget"
)
],
),
)
]))