首页 > 解决方案 > 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()因此第一个孩子的位置现在低于第二个孩子。

标签: flutterflutter-layout

解决方案


我认为这应该可以帮助您

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

显然你需要在你的小部件中替换让我知道你是否需要其他东西


推荐阅读