flutter - Flutter Flex() 如何交换子位置?
问题描述
我使用Flex()
小部件来实现屏幕方向之间的不同布局,如下所示:
final _isPortrait = MediaQuery.of(context).orientation == Orientation.portrait;
Flex(
direction: _isPortrait ? Axis.horizontal : Axis.vertical,
children: <Widget>[
Expanded(flex: _isPortrait ? 2 : 1, child: BottomButton1()),
Expanded(flex: _isPortrait ? 1 : 0, child: BottomButton2()),
],
),
当方向是纵向时,当然BottomButton1()
会在左侧作为第一个孩子。
但是,当方向是横向时,我想交换 and 的位置BottomButton1()
,BottomButton2()
因此第一个孩子的位置现在低于第二个孩子。
解决方案
我认为这应该可以帮助您
class _HelperState extends State<Helper> {
RaisedButton button1 = RaisedButton(
child: Text('Button 1'),
onPressed: () {},
);
RaisedButton button2 = RaisedButton(
child: Text('Button 2'),
onPressed: () {},
);
@override
Widget build(BuildContext context) {
final _isPortrait = false;
print(_isPortrait);
return Scaffold(
body: SafeArea(
child: Center(
child: Flex(
direction: _isPortrait ? Axis.horizontal : Axis.vertical,
children: <Widget>[
Expanded(
flex: _isPortrait ? 2 : 1,
child: _isPortrait ? button1 : button2,
),
Expanded(
flex: _isPortrait ? 1 : 0,
child: _isPortrait ? button2 : button1,
),
],
),
),
),
);
}
}
显然你需要在你的小部件中替换让我知道你是否需要其他东西
推荐阅读
- winapi - 如何从应用程序启动windows服务
- bash - 如何在bash中循环嵌套循环而不重复?
- python - 如何将 Python 列表中的后续数字连接成双(或更多)数字
- reactjs - 重置提交上提交的输入 redux-form
- java - 如果在其他配置文件中添加路由,为什么主配置中的路由没有加载?
- tsql - TSQL 2008 如何使视图的列唯一
- javascript - 元素 onClick 处理程序与兄弟元素的表单 onSubmit 冲突
- ios - 如何在 PWA (React) 中访问 ios 中的摄像头和耳机
- css - 旋转
不在其位置旋转 - html - 如何使用 R 将文本文件超链接到 HTML 文件中?