flutter - [Flutter]Layout/Build Container 基于其兄弟部件的大小（两个部件都是 Column 的子级）

Question

我有一个像这样的小部件布局：

这是它的代码：

      Column(
        children: [
          Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              Icon(Icons.lightbulb_outline),
              SizedBox(
                width: 4,
              ),
              Text(
                'Something something something',
                style: kTextRegularW500,
              ),
            ],
          ),
          Padding(
            padding: const EdgeInsets.only(top: 13.0),
            child: Container(
              padding: EdgeInsets.symmetric(
                vertical: 17,
              ),
              decoration: BoxDecoration(
                color: Colors.black,
                borderRadius: BorderRadius.circular(16),
              ),
              child: Center(
                child: Text(
                  'Next',
                  style: TextStyle(
                    color: Colors.white,
                  ),
                ),
              ),
            ),
          ),
        ],
      )

问题：

如何使“按钮”小部件（Padding列中的第二个小部件）与其上方的（列的第一个小部件）具有相同的宽度Row？

我试过的：

我只是将一个固定宽度添加到该Container渲染为按钮，结果如下：

这是代码：（我只附加了Container它的（按钮）部分）

             Container(
              width: 300,
              padding: EdgeInsets.symmetric(
                vertical: 17,
              )

甚至添加一个固定宽度来Container实现我想要的，但它只是针对这种特殊情况而固定的......如果按钮上方的文本变长，我将回到我最初面对的地方......

所以，我能想出的唯一解决方案是找到一种方法使其Container宽度与上面的宽度相同Row，或者从兄弟小部件获取大小然后应用它，但即使经过数小时的搜索，我也不知道如何。 ..

或者如果您有任何其他方法可以使 button( Container) 与 的大小相同Row，欢迎分享。

标签： flutterflutter-layout

Answer 1

用IntrinsicWidth

IntrinsicWidth(
      child: Column(
        children: [
          Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              Icon(Icons.lightbulb_outline),
              SizedBox(
                width: 4,
              ),
              Text(
                'Something something something something',
               // style: kTextRegularW500,
              ),
            ],
          ),
          Padding(
            padding: const EdgeInsets.only(top: 13.0),
            child: Container(
              padding: EdgeInsets.symmetric(
                vertical: 17,
              ),
              decoration: BoxDecoration(
                color: Colors.black,
                borderRadius: BorderRadius.circular(16),
              ),
              child: Center(
                child: Text(
                  'Next',
                  style: TextStyle(
                    color: Colors.white,
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    )

输出：