Question

我有一个Material小部件，用于包裹MaterialButton来制作边框半径，但是我无法为其设置width属性。我尝试使用SizedBox，但不起作用，Material小部件会继续使用屏幕的所有空间。

代码：

return new SizedBox(
              width: 40,
              child: Material(
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(22.0)),
                elevation: 18.0,
                color: Color(0xFF801E48),
                clipBehavior: Clip.antiAlias, 
                child: MaterialButton(
                  materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
                  height: 30.0,
                  child: new Text('Sair',
                      style:
                          new TextStyle(fontSize: 16.0, color: Colors.white)),
                ),
              ),
            );

结果：

显然它没有40.0的宽度大小。

Answer 1

使用Padding解决：

return Padding(
              padding: EdgeInsets.fromLTRB(50, 0, 50, 0),
              child: Material(
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(22.0)),
                elevation: 18.0,
                color: Color(0xFF801E48),
                clipBehavior: Clip.antiAlias, // Add This
                child: MaterialButton(
                  materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
                  height: 30.0,
                  child: new Text('Sair',
                      style:
                          new TextStyle(fontSize: 16.0, color: Colors.white)),
                  onPressed: () {
                    setState(() {
                      _isNeedHelp = false;
                    });
                  },
                ),
              ),
            );

结果：

Answer 2

您找到了解决方法，但这里有个建议。总是在需要更改宽度，高度或添加某些小部件的填充时，将小部件包装到容器中。容器小部件就是用于这种工作的。

Container(
  width: myWidthValue, // Container child widget will get this width value
  height: myHeghtValue, // Container child widget will get this height value
  padding: allowPaddingToo, // padding is allowed too
  child: Material(
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(22.0)),
                elevation: 18.0,
                color: Color(0xFF801E48),
                clipBehavior: Clip.antiAlias, // Add This
                child: MaterialButton(
                  materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
                  height: 30.0,
                  child: new Text('Sair',
                      style:
                          new TextStyle(fontSize: 16.0, color: Colors.white)),
                  onPressed: () {
                    setState(() {
                      _isNeedHelp = false;
                    });
                  },
                ),
              ),
);

Answer 3

一般来说，您可以通过这种方式设置小部件的大小、填充和边距。这是按钮的示例：

getBoundingClientRect()

如何在Flutter上为Material小部件设置宽度？

3 个答案: