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

Posted 2023-02-23

【中文标题】如何在 Flutter 上将宽度设置为 Material 小部件？

【英文标题】：How to set width to Material widget on Flutter?

【发布时间】：2019-07-16 22:46:00

【问题描述】：

我有一个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 的宽度尺寸。

【参考方案1】：

更好的方法是使用 Container 小部件。当您需要更改宽度、高度或向任何小部件添加填充/边距时，您应该将目标小部件包装到容器中。容器小部件适用于此类工作。

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;
                    );
                  ,
                ),
              ),
);

【参考方案2】：

使用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;
                    );
                  ,
                ),
              ),
            );

结果：

【参考方案3】：

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

   Container(
          margin: EdgeInsets.only(top: 10), // Top Margin
          child:
            ElevatedButton(
              style: TextButton.styleFrom(

                // Inside Padding 
                padding: EdgeInsets.symmetric(horizontal: 0, vertical: 20), 

                // Width,Height
                minimumSize: Size(300, 30), 
              ),
              child: Text('Upload Data'),
              onPressed: () submitForm();,
            ),
        ),