プログラムでFlutterのウィジェットを表示/非表示


111

Androidでは、すべてのViewサブクラスsetVisibility()に、Viewオブジェクトの可視性を変更できるメソッドがあります

可視性の設定には3つのオプションがあります。

  • 可視:Viewレイアウト内で可視をレンダリングします
  • 非表示:を非表示にしますがView、表示されたView場合にが占めるものと同じギャップを残します
  • View削除:を非表示にし、レイアウトから完全に削除します。それはあるかのようだheightwidthしました0dp

Flutterのウィジェットについて上記に相当するものはありますか?

クイックリファレンス:https : //developer.android.com/reference/android/view/View.html#attr_android : visibility

回答:


81

更新:この回答が書かれたので、Visibilityが導入され、この問題の最良の解決策を提供します。


of とOpacity一緒に使用して、要素を非表示にしてもスペースを占有して描画できます。opacity:0.0

スペースを占有しないようにするには、空のに置き換えますContainer()

編集:Opacityオブジェクトでラップするには、次の操作を行います。

            new Opacity(opacity: 0.0, child: new Padding(
              padding: const EdgeInsets.only(
                left: 16.0,
              ),
              child: new Icon(pencil, color: CupertinoColors.activeBlue),
            ))

Opacityに関するGoogle Developersクイックチュートリアル:https : //youtu.be/9hltevOHQBw


3
ありがとうございました!ええ、それはそれを行う最もきれいな方法ではありませんが、それは間違いなく目的を果たすでしょう。将来的に可視性機能をウィジェットと統合する可能性はありますか?
user3217522 2017年

3
ウィジェットが通常ユーザー入力に反応する場合は、ウィジェットIgnorePointerも同様にラップしてください。そうしないと、ユーザーはウィジェットをトリガーできます。
ダンカンジョーンズ

1
ウィジェットはまだ存在し、タップなどに応答できるため、これは理想的ではありません。これを処理する最良の方法については、可視性ウィジェットを使用して以下の回答を参照してください。
Russell Zornes

上向きのコメントにあるように、不透明度を使用すると、renderTreeでウィジェットがレンダリングされます。可視性ウィジェットの使用が最も推奨されます。
Isac Moura

ウィジェットを非表示にすることと不透明度をas0にすることは2つの異なることです。非表示のウィジェットを使用すると、ウィジェットを操作できますが、それは単に非表示です。可視性ウィジェットを使用すると、必要になるまでウィジェットを削除できます。
UndercoverCoder

173

見えない:ウィジェットは画面上の物理的なスペースを取りますが、ユーザーには見えません。

Gone:ウィジェットは物理的なスペースを取らず、完全になくなっています。


目に見えない例

Visibility(
  child: Text("Invisible"),
  maintainSize: true, 
  maintainAnimation: true,
  maintainState: true,
  visible: false, 
),

なくなった例

Visibility(
  child: Text("Gone"),
  visible: false,
),

または、if条件を使用して、非表示と削除の両方を行うことができます。

Column(
  children: <Widget>[
    if (show) Text("This can be visible/not depending on condition"),
    Text("This is always visible"),
  ],
) 

16
その「if」条件は完璧です!
johnc

私の愛のフラッター❤️
nipunasudha

62

質問に協力して、空の質問に置き換える例を示しますContainer()

以下がその例です。

ここに画像の説明を入力してください

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

5
これは受け入れられる答えになるはずです。これは、「プログラムによるウィジェットの表示/非表示」の正しい実装です
Bishwajyoti Roy

はい、これは間違いなく受け入れられるはずです。これは、Flutterの基本的な柱、つまりsetState()を使用しているためです。
Yo Apps

27

Flutterには、ウィジェットの表示/非表示に使用する可視ウィジェットが含まれています。ウィジェットを使用して、交換を変更することで2つのウィジェットを切り替えることもできます。

このウィジェットは、可視、不可視、なくなった状態など、さまざまな状態を実現できます。

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

19

Offstageウィジェットをお試しください

属性offstage:trueが物理的なスペースを占めておらず、見えない場合、

属性の場合、offstage:falseそれは物理的なスペースを占め、表示されます

Offstage(
   offstage: true,
   child: Text("Visible"),
),

これについてのメモ:Flutterのドキュメントでは、「オフステージを使用すると、画面にウィジェットを表示せずにウィジェットの寸法を測定できます(まだウィジェットを非表示にするには、ウィジェットをビューから非表示にするには、ウィジェットをツリーから完全に削除することをお勧めします。それをオフステージサブツリーで維持するのではなく。」
lukeic

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

9

フラッター1.5ダート2.3視認性がなくなっために、あなたは、容器の使用を加えることなく、コレクション内のif文を使用して可視性を設定することができます。

例えば

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

          ],
        )

それは以前のフラッター/ダートバージョンで利用可能なオプションよりもはるかに優れています。ありがとう!
ハンマー

8

(Visibility)と呼ばれる新しいウィジェットを使用して、コード内の任意のウィジェットをカプセル化できます。これは、ウィジェットを非表示にしたいウィジェットの左端にある黄色のランプからのものです。

例:行を非表示にする場合:

  1. ランプをクリックして(ウィジェットでラップ)を選択します
  2. ウィジェットの名前をVisibilityに変更します
  3. visibleプロパティを追加して、falseに設定します
  4. 新しく作成されたウィジェット(Visibility Widget)の子は、非表示にするウィジェットです

              Visibility(
                  visible: false,
                  child: Row(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      SizedBox(
                        width: 10,
                      ),
                      Text("Search",
                        style: TextStyle(fontSize: 20
                        ),),
                    ],
                  ),
                ),

私はそれが将来誰かを助けることを願っています


5

初心者にもこれを試してみてください。

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

3

更新

FlutterにVisibilityウィジェットが追加されました。独自のソリューションを実装するには、以下のコードから始めます。


自分でウィジェットを作成します。

表示/非表示

class ShowWhen extends StatelessWidget {
  final Widget child;
  final bool condition;
  ShowWhen({this.child, this.condition});

  @override
  Widget build(BuildContext context) {
    return Opacity(opacity: this.condition ? 1.0 : 0.0, child: this.child);
  }
}

表示/削除

class RenderWhen extends StatelessWidget {
  final Widget child;
  final bool condition;
  RenderWhen({this.child, this.show});

  @override
  Widget build(BuildContext context) {
    return this.condition ? this.child : Container();
  }
}

ちなみに、上記のウィジェットにはもっと良い名前がありますか?


続きを読む

  1. 可視性ウィジェットの作り方に関する記事

3

@CopsOnRoadですでに強調されているように、Visibilityウィジェットを使用できます。しかし、その状態を維持したい場合、たとえば、ビューページャーを作成して、ページに基づいて特定のボタンを表示または非表示にしたい場合は、この方法で行うことができます

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


-8

1つの解決策は、ウィジェットのcolorプロパティをColors.transparentに設定することです。例えば:

IconButton(
    icon: Image.asset("myImage.png",
        color: Colors.transparent,
    ),
    onPressed: () {},
),

1
透明はIconButtonまだクリックを受け取り、スペースを占有するため、良い解決策ではありません。この回答を反対投票する前に、編集または削除してください。
CopsOnRoad
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.