Question

我一直试图按我的按钮来填充我的容器。

但是从上图可以看到，左侧的按钮（红色）显然没有充满整个容器（绿色）。我可以通过在MaterialButton上增加高度来解决此问题，但是恕我直言，这不是最佳解决方案，因为设备的高度可能有所不同。您能帮我解决这个问题吗？谢谢。

这是我的代码：

        Row(
          children: <Widget>[
            Expanded(
              child: Container(
                color: Colors.green,
                child: MaterialButton(
                  color: Colors.red,
                  child: Text("Button A"),
                  onPressed: () {},
                ),
              ),
            ),
            Expanded(
              child: MaterialButton(
                color: Colors.blue,
                child: Text("Button B"),
                onPressed: () {},
              ),
            ),
          ],
        ),

Answer 1

只需在materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,中添加-MaterialButton

Row(
            children: <Widget>[
              Expanded(
                child: Container(
                  color: Colors.green,
                  child: MaterialButton(
                    materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,  // Add this
                    color: Colors.red,
                    child: Text("Button A"),
                    onPressed: () {},
                  ),
                ),
              ),
              Expanded(
                child: MaterialButton(
                  materialTapTargetSize: MaterialTapTargetSize.shrinkWrap, // Add this
                  color: Colors.blue,
                  child: Text("Button B"),
                  onPressed: () {},
                ),
              ),
            ],
          ),

Answer 2

您可以尝试

Row(
          mainAxisAlignment: MainAxisAlignment.center,
          mainAxisSize: MainAxisSize.max,
          children: <Widget>[
            Expanded(
              child: Container(
                color: Colors.green,
                child: SizedBox(
                  height: 48,
                  child: MaterialButton(
                    height: double.infinity,
                    color: Colors.red,
                    child: Text("Button A"),
                    onPressed: () {},
                    padding: EdgeInsets.all(0),
                  ),
                ),
              ),
            ),
            Expanded(
              child: SizedBox(
                height: 48,
                child: MaterialButton(
                  height: double.infinity,
                  color: Colors.blue,
                  child: Text("Button B"),
                  onPressed: () {},
                ),
              ),
            ),
          ],
        ),

颤振：设置按钮高度以填充容器

2 个答案: