当小部件不可见时选项卡正在移动

Question

我是 Flutter 的新手，所以我的问题可能对某些人来说很基础。

问题是在我的应用程序中，我想在未选中 CheckBox 时隐藏 TextField。 TextField 旁边是一个应该是静态的按钮。我的问题是，当我想隐藏此 TextField 时，按钮会移到左侧。我认为最好的选择是展示给你看

之前：

之后：

这是我使用的代码：

bool secondLayer = false;

void _secondLayer(bool value) => setState(() => secondLayer = value);
@override
  Widget build(BuildContext context) {
    return new Scaffold(
      /*appBar: new AppBar(
        title: new Text('Name Here'),
      ),*/
        resizeToAvoidBottomInset: false,
        body: SingleChildScrollView(
            child: new Container(
            padding: new EdgeInsets.all(32.0),
            child: new Center(
              child: new Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: <Widget>[
                  Container(
                    child: new Row(
                      children: <Widget>[
                        Expanded(
                          child: Column(
                            children: <Widget>[
                              new TextField(
                                decoration: InputDecoration(
                                  labelText: 'First Hidden Layer',
                                  hintText: '25',
                                ),
                                autocorrect: true,
                                autofocus: true,
                                keyboardType: TextInputType.number,
                              ),
                            ],
                          ),
                        ),
                        Expanded(
                          child: Column(
                            children: <Widget>[
                              new SizedBox(
                                  width: 100,
                                  child: new RaisedButton(onPressed: null, child: new Text('ADD DATA'),)
                              )
                            ],
                          ),
                        )
                      ],
                    ),
                  ),
                  Container(
                    child: new CheckboxListTile(
                        value: secondLayer,
                        onChanged: _secondLayer,

                        title: new Text(
                            'Use Second Hidden Layer',
                            style: new TextStyle(
                              fontSize: 12
                            ),
                        ),
                        controlAffinity: ListTileControlAffinity.leading,
                    ),

                  ),
                  Container(
                    child: new Row(
                      children: <Widget>[
                        Visibility(
                          visible: secondLayer,
                          child: new Expanded(
                            child: Column(
                              children: <Widget>[
                                new TextField(
                                  decoration: InputDecoration(
                                    labelText: 'Second Hidden Layer',
                                    hintText: '25',
                                  ),
                                  autocorrect: true,
                                  autofocus: true,
                                  keyboardType: TextInputType.number,
                                ),
                              ],
                            ),
                          ),
                        ),
                        Expanded(
                          child: Column(
                            children: <Widget>[
                              new SizedBox(
                                width: 100,
                                child: new RaisedButton(onPressed: null, child: new Text('OPTIONS'),)
                              )

                            ],
                          ),
                        )
                      ],
                    ),
                  ),
                  Container(
                    child: new TextField(
                      decoration: InputDecoration(
                        labelText: 'Epochs',
                        hintText: '5000',
                      ),
                      autocorrect: true,
                      autofocus: true,
                      keyboardType: TextInputType.number,
                    ),
                  ),
                  Container(
                    child: new TextField(
                      decoration: InputDecoration(
                        labelText: 'Learning Rate',
                        hintText: '0.00333',
                      ),
                      autocorrect: true,
                      autofocus: true,
                      keyboardType: TextInputType.number,
                    ),
                  ),
                  Container(
                    padding: EdgeInsets.only(top: 20),
                    child: new Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: <Widget>[
                        Container(
                          width: MediaQuery.of(context).size.width/3,
                          height: MediaQuery.of(context).size.width,
                          decoration: BoxDecoration(
                            border: Border.all(color: Color.fromRGBO(0, 0, 0, 100)),
                          ),
                          child: new Text('data')
                        ),
                        Container(
                            width: MediaQuery.of(context).size.width/3,
                            height: MediaQuery.of(context).size.width,
                            decoration: BoxDecoration(
                              border: Border.all(color: Color.fromRGBO(0, 0, 0, 100)),
                            ),
                            child: new Text('data')
                        )
                      ],
                    )
                  )
                ],
              ),
            )
          )
        )
    );

Answer 1

这是因为您没有添加任何 replacement 属性到您的 Visibility 小部件。

Visibility(
   visible: secondLayer,
   child: Expanded(
      child: Column(
         children: <Widget>[
            // your text field here
         ]
      ),
   ),
   replacement: Expanded(child: Container()), // the widget which will fill the space when hiddden
)

当您用 Expanded 中的空 Container 替换 TextField 以填充空的 space.

时，这样的事情应该会起作用

Answer 2

需要将Visibility插件的maintainSize属性设置为true，用于决定“是否维护space”小部件本来应该在哪里。” Source

您还需要将 maintainAnimation 和 maintainState 设置为 true 才能使 maintainSize 正常工作。 Source

因此您的代码将从：

Visibility(
     visible: secondLayer,
     child: yourChildWidget
),

至：

Visibility(
   visible: secondLayer,
   maintainSize: true,
   maintainAnimation: true,
   maintainState: true,
   child: yourChildWidget
),

当小部件不可见时选项卡正在移动

Tab is shifting when widget is not visible

flutter

widget

show-hide

shift