flutter - 当小部件不可见时选项卡正在移动
问题描述
我是 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')
)
],
)
)
],
),
)
)
)
);
解决方案
这是因为您没有向Widget添加任何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
)
TextField
当你用一个空的Container
内部替换你的空Expanded
来填充你的空白空间时,这样的东西应该可以工作。
推荐阅读
- python - 设计这个轨迹类的最佳方法
- sql - 使用 Rollup 时重命名 Null 值
- svg - foreignObject 浏览器兼容性
- python - Python - 将 2D 坐标对列表转换为 2 个 X 和 Y 分量列表
- r - 熔化具有列表数据类型的 data.table(获取一个列中的值列表,以获得另一个列中的每个唯一值)
- javascript - JavaScript 条件重定向
- kubernetes - Kubernetes 是否包含 UUID 服务?
- php - cURL 结果作为另一个 cURL 参数
- javascript - 异步意外标识符
- javascript - Javascript:焦点不是函数