之間的行間距不分隔子項

我做了一行，我需要用空格分隔它的孩子，但它沒有分開。這是代碼：

Container(
  height: 51,
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: [
      Container(width: 56, height: 51, child: ImageIcon(AssetImage("assets/images/treadmill.png"))),
      SizedBox(width: 20),
      Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: const [
              Text(
                "EQUIPMENT",
                style: TextStyle(
                  fontSize: 16,
                  fontFamily: "OpenSans",
                  fontWeight: FontWeight.w600
                ),
              ),
              ImageIcon(AssetImage("assets/icons/delete.png"), color: Colors.red)
            ],
          ),
          Text(
            "1234567891235896211234E",
            style: TextStyle(
                fontSize: 14,
                fontFamily: "OpenSans",
                fontWeight: FontWeight.normal
            ),
          ),
        ],
      )
    ],
  ),
),

這是結果：（忽略單詞中的“A”）

我試著放擴展的、間隔的，但所有的嘗試都出錯了。

（我不想放SizedBox來騰出這個空間，因為手機螢屏有好幾種）

為什么會發生這種情況，該怎么辦？

uj5u.com熱心網友回復：

你可以使用IntrinsicWidth（有一些成本）..

 Container(
  height: 51,
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: [
      Container(
        width: 56,
        height: 51,
        color: Colors.red,
      ),
      IntrinsicWidth(
        child: Column(
          children: [
            Row(
              mainAxisSize: MainAxisSize.max,
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text(
                  "EQUIPAMENT",
                  style: TextStyle(
                      fontSize: 16,
                      fontFamily: "OpenSans",
                      fontWeight: FontWeight.w600),
                ),
                Container(
                  width: 4,
                  height: 33,
                  color: Colors.red,
                ),
              ],
            ),
            Text(
              "1234567891235896211234E",
              style: TextStyle(
                  fontSize: 14,
                  fontFamily: "OpenSans",
                  fontWeight: FontWeight.normal),
            ),
          ],
        ),
      )
    ],
  ),
),

uj5u.com熱心網友回復：

為您的尺寸提供所有可用空間，然后為您的設備和垃圾桶提供所有可用空間。用擴展包裝它們：

Container(
  height: 51,
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: [
      Container(width: 56, height: 51, child: ImageIcon(AssetImage("assets/images/treadmill.png"))),
      SizedBox(width: 20),
      Expanded( 
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Row(
              mainAxisSize: MainAxisSize.max,
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: const [
                Expanded(
                  child: Text(
                    "EQUIPMENT",
                    style: TextStyle(
                        fontSize: 16,
                        fontFamily: "OpenSans",
                        fontWeight: FontWeight.w600
                    ),
                  ),
                ),
                ImageIcon(AssetImage("assets/icons/delete.png"), color: Colors.red)
              ],
            ),
            Text(
              "1234567891235896211234E",
              style: TextStyle(
                  fontSize: 14,
                  fontFamily: "OpenSans",
                  fontWeight: FontWeight.normal
              ),
            ),
          ],
        ),
      )
    ],
  ),
),

標籤：扑镖颤动布局

上一篇：如何將資料從條形碼掃描器傳遞到文本欄位(Flutter)

下一篇：在FlutterSDK中找不到包flutter_localization