我需要灵活设置盒子高度以适应任何尺寸的屏幕答案

【问题标题】：I need to set my box height flexible to fit any size of screen我需要灵活设置盒子高度以适应任何尺寸的屏幕
【发布时间】：2022-09-30 03:39:29
【问题描述】：

这是我的第一个问题，我是 Flutter 的新手。我搜索了很多，但我没有找到任何合适的答案。

Flutter：我需要灵活设置盒子高度以适应任何尺寸的屏幕。我还需要将最后一个盒子放在屏幕右侧以适应任何屏幕。我还在屏幕图像中提到了我的问题。请帮忙。我在这里添加我的代码。

我的代码的输出和要求

void main() {
  runApp(const Challange2());
}

class Challange2 extends StatelessWidget {
  const Challange2({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.blueGrey,
        body: SafeArea(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              Container(
                height: 850.0,
                width: 100.0,
                color: Colors.amberAccent,
                child: Text(
                  \'This box height should be flexible according to screen size\',
                  style: TextStyle(color: Colors.black, fontSize: 25),
                ),
              ),
              const SizedBox(
                width: 65,
              ),
              Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Container(
                    height: 100.0,
                    width: 100.0,
                    color: Colors.deepPurpleAccent,
                    child: Text(
                      \'Text2\',
                      style: TextStyle(color: Colors.white, fontSize: 25),
                    ),
                  ),
                  Container(
                    height: 100.0,
                    width: 100.0,
                    color: Colors.deepOrangeAccent,
                    //Flexible(
                    child: Text(
                      \'Text3\',
                      style: TextStyle(color: Colors.white, fontSize: 25),
                    ),
                  ),
                  //),
                ],
              ),
              const SizedBox(
                width: 65,
              ),
              Container(
                height: 850.0,
                width: 100.0,
                color: Colors.blue,
                child: Text(
                  \'This box need to be right alignment and height should be flexible according to screen size\',
                  style: TextStyle(color: Colors.black, fontSize: 25),
                ),
                // child: const Align(
                //   alignment: Alignment.topCenter,
              ),
            ],
          ),
        ),
      ),
      //),
      //return Container();
    );
  }
}

标签： flutter dart flutter-layout

【解决方案1】：

为了适应屏幕高度，可以将容器的高度设置为 double.infinity，要保持 rigth 容器向右对齐，请在中心行子项中使用扩展，以使此小部件根据需要增长或缩小。

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Row(children: [
        Container(
          width: 100,
          height: double.infinity,
          color: Colors.red,
          child: Text(
              'This box height should be flexible according to screen size'),
        ),
        Expanded(
          child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Container(
                  width: 50,
                  height: 50,
                  color: Colors.green,
                ),
                Container(
                  width: 50,
                  height: 50,
                  color: Colors.yellow,
                ),
              ]),
        ),
        Container(width: 100,
                            height: double.infinity,
color: Colors.blue, child:Text("Right Panel"),),
      ]),
    );
  }
}

【讨论】：

非常感谢您的帮助。我还有一个问题。哪个代码将此框带到屏幕右侧？我还不清楚，但它解决了我的问题。容器（宽度：100，高度：double.infinity，颜色：Colors.blue，孩子：const Text（“右面板”），），
它是扩展的小部件。如果在 web 或桌面上运行您的项目以便调整窗口大小，您将看到此小部件将增大或缩小以填充其他两个具有固定大小的小部件留下的所有空间。

【解决方案2】：

LayoutBuilder() 提供了一种动态获取实际屏幕尺寸并允许您计算相对尺寸的方法：Youtube - Flutter: LayoutBuidler

通常在使用行和列时，您可以使用扩展小部件来获得相对而不是绝对大小：

Row(
   children: [
     Expanded(flex: 1, child: Container()), // This will take up 1 third of the screen
     Expanded(flex: 2, child: Container()), // This will take up 2 thirds of the screen
   ]
),

【讨论】：

【解决方案3】：

Expanded(flex: 1, child: Container()), 
Expanded(flex: 1, child: Container()),

【讨论】：