it-swarm.com.de

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

17
user3217522

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

15
Collin Jackson

Um mit der Frage zusammenzuarbeiten und ein Beispiel für das Ersetzen der Frage durch ein leeres Container() anzuzeigen.

Hier ist das Beispiel unten:

 enter image description here

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],
                          ),
                        ),
                      ),
                    ],
                  ),
                )
              ),
            ],
          )                    
        ],
      )
    );
  }
}
28
rafaelcb21

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

 enter image description here

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);
  }
}
11
CopsOnRoad

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; 
                  });
              },)

          ],
        )
3
nonybrighto

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"),)

2
Android Team

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?

1
Amsakanna
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('');
                  },),
                ),
              ),
            ),
          ),
          ),
1
Alan John

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";
      }
    });
  }
}
1

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"
            )
          ],
        ),
      )
    ]))
0
AlexPad