android - Flutter:如何构建改变移动设备方向时移动 block 的逻辑？

Question

使用 flutter，我需要在移动设备中放置两个 block ，以便:

• 处于垂直位置block_A位于顶部，并且 block_B位于底部
• 处于水平位置 block_A位于左侧并且block_B在右侧

image of result

---

我是通过Wrap实现的，根据当前屏幕的宽度设置 block 的宽度，Wrap自动放下 block 。但我不确定这是否是正确的决定。

class MainPage extends StatelessWidget {

  Widget build(BuildContext context) {

    var screenSize = MediaQuery.of(context).size;
    double mainBoxWidth = screenSize.width / 100 * (screenSize.width > screenSize.height ? 50 : 100) ;
    double mainBoxHeight = screenSize.height / 100 * (screenSize.width > screenSize.height ? 100 : 50) ;

    return Scaffold(
      body: Center(
        child: Wrap(
          children: [

            Container(
              child: Center(
                child: Text("block_A"),
                ),
              width: mainBoxWidth,
              height: mainBoxHeight,
              ),


            Container(
              child: Center(
                child: Text("block_B"),
                ),
              width: mainBoxWidth, 
              height: mainBoxHeight,           
              ),

          ],
        ),
      ),
      backgroundColor: Colors.green
    );
  }
}

请告诉我如何正确执行此任务。谢谢。

Answer 1

与 Flutter 中的大多数事情一样，有几种方法可以实现这一点。这是一种方法:

class MainPage extends StatelessWidget {
  Widget build(BuildContext context) {
    var screenSize = MediaQuery.of(context).size;
    final isLandscape = screenSize.width > screenSize.height;
    return Scaffold(
      body: isLandscape
          ? Row(
              children: _buildChildren(),
            )
          : Column(
              children: _buildChildren(),
            ),
      backgroundColor: Colors.white,
    );
  }

  List<Widget> _buildChildren() {
    return [
      Expanded(
        child: Container(
          color: Colors.yellow,
          child: Center(
            child: Text("block_A"),
          ),
        ),
      ),
      Expanded(
        child: Container(
          color: Colors.green,
          child: Center(
            child: Text("block_B"),
          ),
        ),
      ),
    ];
  }
}