行的孩子根據他們的孩子大小進行對齊

這兩行根據它們的子大小對齊。

這就是為什么第一個 TAGS 和第二個 TAGS 文本小部件沒有居中的原因。我希望它們像 CSS Grid 一樣正確居中。

我的方法：

Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Container(
                  height: 50,
                  color: Colors.black,
                  child: Padding(
                    padding: const EdgeInsets.symmetric(horizontal: defaultPadding),
                    child: Row(
                      mainAxisSize: MainAxisSize.max,
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: const [
                        Text("Name"),
                        Text("Tags"),
                        Text("Default"),
                      ],
                    ),
                  ),
                ),
                Container(
                  height: 60,
                  color: const Color(0xFF5D5C5D),
                  child: Padding(
                    padding: const EdgeInsets.symmetric(horizontal: defaultPadding),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: const [Text("USER OTP SENT"), Text("TAGS"), Text("SMS")],
                    ),
                  ),
                )
              ],
            )

我希望它們像這樣對齊（紅線確定開始/結束位置）：

uj5u.com熱心網友回復：

Flutter 中有 GridView Widget，就像在 CSS 中一樣。

1. 使用 GridView.count() 然后定義 crossAxisCount 以指定水平軸上的小部件數量（您的是 3）。

2.使用childAspectRatio (itemWidth / itemHeight)得到想要的高度。

3. 在代碼中定義了 6 個孩子，如前所述，其中 3 個孩子將被排成一排。

GridView.count(
          primary: false,
          childAspectRatio: 3 / 1.5,
          crossAxisCount: 3,
          children: <Widget>[
            Container(
              alignment: Alignment.center,
              height: 10,
              padding: const EdgeInsets.all(8),
              child: const Text(
                "Name",
                style: TextStyle(color: Colors.white),
              ),
              color: Colors.black,
            ),
            Container(
              alignment: Alignment.center,
              padding: const EdgeInsets.all(8),
              child: const Text(
                'Tags',
                style: TextStyle(color: Colors.white),
              ),
              color: Colors.black,
            ),
            Container(
              alignment: Alignment.center,
              padding: const EdgeInsets.all(8),
              child: const Text(
                'Default',
                style: TextStyle(color: Colors.white),
              ),
              color: Colors.black,
            ),
            Container(
              alignment: Alignment.center,
              padding: const EdgeInsets.all(8),
              child: const Text('USER OTP SENT',
                  style: TextStyle(color: Colors.white)),
              color: const Color(0xFF5D5C5D),
            ),
            Container(
              alignment: Alignment.center,
              padding: const EdgeInsets.all(8),
              child: const Text('Tags', style: TextStyle(color: Colors.white)),
              color: const Color(0xFF5D5C5D),
            ),
            Container(
              alignment: Alignment.center,
              padding: const EdgeInsets.all(8),
              child: const Text('SMS', style: TextStyle(color: Colors.white)),
              color: const Color(0xFF5D5C5D),
            ),
          ],
        )

解決方案2： 我會建議使用LayoutBuilderandSizedBox來裝飾，

body: LayoutBuilder(
  builder: (context, constraints) {
    return Column(
      children: [
        Container(
          // color: Colors.black,
          width: constraints.maxWidth,
          height: 50,
          child: Padding(
            padding: EdgeInsets.symmetric(horizontal: defaultPadding),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                SizedBox(
                  width:
                      (constraints.maxWidth / 3) - (defaultPadding / 1.5),
                  child: const Text("Name"),
                ),
                SizedBox(
                  width:
                      (constraints.maxWidth / 3) - (defaultPadding / 1.5),
                  child: const Text(
                    "Tags",
                    textAlign: TextAlign.center,
                  ),
                ),
                SizedBox(
                  width:
                      (constraints.maxWidth / 3) - (defaultPadding / 1.5),
                  child: const Text(
                    "Default",
                    textAlign: TextAlign.end,
                  ),
                ),
              ],
            ),
          ),
        ),
        Container(
          height: 50,
          color: const Color(0xFF5D5C5D),
          child: Padding(
            padding: EdgeInsets.symmetric(horizontal: defaultPadding),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                ...const [
                  Text("USER OTP SENT"),
                  Text(
                    "TAGS",
                    textAlign: TextAlign.center,
                  ),
                  Text(
                    "SMS",
                    textAlign: TextAlign.end,
                  ),
                ].map((e) => SizedBox(
                      width: (constraints.maxWidth / 3) -
                          (defaultPadding / 1.5),
                      child: e,
                    ))
              ].toList(),
            ),
          ),
        )
      ],
    );
  },
),

解決方案 3：或使用ExpandedwithtextAlign

SizedBox(
    height: 50,
    child: Column(
      children: [
        Container(
          // color: Colors.black,
          child: Padding(
            padding:
                EdgeInsets.symmetric(horizontal: defaultPadding),
            child: Row(
              children: const [
                Expanded(child: Text("Name")),
                Expanded(
                    child:
                        Text("Tags", textAlign: TextAlign.center)),
                Expanded(
                  child: Text(
                    "Default",
                    textAlign: TextAlign.right,
                  ),
                ),
              ],
            ),
          ),
        ),
        Container(
          color: const Color(0xFF5D5C5D),
          child: Padding(
            padding:
                EdgeInsets.symmetric(horizontal: defaultPadding),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: const [
                Expanded(child: Text("USER OTP SENT")),
                Expanded(
                  child: Text("TAGS", textAlign: TextAlign.center),
                ),
                Expanded(
                  child: Text(
                    "SMS",
                    textAlign: TextAlign.right,
                  ),
                ),
              ],
            ),
          ),
        )
      ],
    ))

標籤：

上一篇：MaterialButtononPressed監聽器不起作用（Flutter）

下一篇：Flutter中Column的第一個元素的附加寬度