Flutter 对齐容器

Question

所以我正在做我的第一个项目。基本上我想平等地对齐 4 个容器。它们应该具有相同的 H/W 尺寸，因此我可以在以后将额外的数据放入它们时滚动它们.....

这是我的代码

Widget build(BuildContext context) {
    return Center(
      child: Scaffold(
        body: Center(
          child: Padding(
            padding: const EdgeInsets.all(20.0),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Row(
                  children: [
                    Row(
                      children: [
                        VerticalText1(),
                        DoBuilder(),
                      ],
                    ),
                    Column(
                      children: const [
                        SizedBox(
                          width: 10,
                        )
                      ],
                    ),
                    Column(
                      children: [
                        DecideBuilder(),
                      ],
                    ),
                  ],
                ),
                Row(
                  children: const [
                    SizedBox(
                      height: 10,
                    )
                  ],
                ),
                Row(
                  children: [
                    Row(
                      children: [
                        VerticalText2(),
                        DelegateBuilder(),
                      ],
                    ),
                    Column(
                      children: const [
                        SizedBox(
                          width: 10,
                        )
                      ],
                    ),
                    Align(
                      alignment: Alignment.bottomLeft,
                      child: DeleteBuilder(),
                    ),

所以我正在做我的第一个项目。基本上我想平等地对齐 4 个容器。它们应该具有相同的 H/W 大小，因此我可以在以后将额外的数据放入它们时滚动它们......所以我正在处理我的第一个项目。基本上我想平等地对齐 4 个容器。它们应该具有相同的 H/W 大小，因此我可以在以后将额外数据放入它们时滚动它们.....

Answer 1

您应该尝试使用GridView 而不是行和列，否则您可以尝试使用媒体查询的高度和宽度。

GridView.builder(
        itemCount: 4,
        gridDelegate:
        SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
        itemBuilder: (BuildContext context, int index) {
          return new Card(
            child: Container(
              color: Colors.green,
              child: Center(child: Text("$index"),),
            ),
          );
        },
      )

并使用列和行

idget build(BuildContext context) {
    double height = MediaQuery.of(context).size.height;
    double width = MediaQuery.of(context).size.width-20;
    return Scaffold(
      appBar: AppBar(
        title: Text("widget.title"),
      ),
      body: Stack(
        children: [
          Column(
            children: [
              Expanded(
                child: Row(
                  children: [
                    Container(
                      height: height / 2,
                      width: width/2,
                      color: Colors.green,
                    ),
                    SizedBox(width: 10,),
                    Container(
                      height: height / 2,
                      width: width / 2,
                      color: Colors.green,
                    )
                  ],
                ),
              ),
              SizedBox(height: 10,),
              Expanded(
                child: Row(
                  children: [
                    Container(
                      height: height / 2,
                      width: width / 2,
                      color: Colors.green,
                    ),
                    SizedBox(width: 10,),
                    Container(
                      height: height / 2,
                      width: width / 2,
                      color: Colors.green,
                    )
                  ],
                ),
              ),
            ],
          ),
          Center(
            child: Padding(
              padding: const EdgeInsets.only(right:10.0),
              child: CircleAvatar(child: Icon(Icons.home),),
            ),
          )
        ],
      ),
    );
  }

输出：

Answer 2

对我来说，我也是 Flutter 的初学者，但我知道，如果您想要容器的实际大小并且希望它具有某种响应性，您有两种方法可以做到这一点： 首先你可以使用：

(Mediaquery).of(context).size.width or  
(media.query).of(context).size.height 

这将为您提供屏幕大小，您可以根据需要为每个容器使用它，例如：

Container(
child:,
width: (MediaQuery.of(context).size.width / 2))

这将为您提供一半的屏幕宽度，无论设备运行应用程序，屏幕尺寸都将相同

以及您可以使用扩展小部件的其他方式： 将每个容器放在展开的小部件中，并赋予 flex 参数值为 1 这是一个例子：

Row(children:[
Expanded(flex:1,child:Container()),
Expanded(flex:1,child:Container()),]),

expanded 将对弯曲求和，并将元素上的屏幕空间划分为所有相等的在单列中重复上面的代码有 2 行，我希望你的代码能如你所愿地工作