Flutter對齊容器

所以我正在做我的第一個專案。基本上我想平均對齊 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，以便我可以在稍后將額外資料放入它們時滾動它們.....

uj5u.com熱心網友回復：

對我來說，我也是 flutter 的初學者，但我知道如果您想要容器的實際大小并且希望它具有某種回應能力，您有兩種方法可以做到這一點：首先，您可以使用：

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

這將為您提供螢屏的大小，您可以根據需要為每個容器使用它，例如：

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

這會給你一半的螢屏寬度，無論設備運行應用程式，螢屏大小的大小都相同

以及使用擴展小部件的其他方式：將每個容器放在擴展小部件中，并在此處提供一個 flex 引數值，這是一個示例：

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

Expanded 將對 flexes 求和，并將元素上的螢屏空間全部相等重復上述代碼在單列中有 2 行，我希望您的代碼能夠按您的意愿作業

uj5u.com熱心網友回復：

您應該嘗試使用而不是行和列，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),),
            ),
          )
        ],
      ),
    );
  }

輸出：

標籤：扑 安卓工作室 镖

上一篇：我想檢查所有for回圈迭代的條件，然后執行該陳述句

下一篇：Flutter-如何從sharedPreferences檢查字串值