我发现无法在扑动中设置提升按钮的宽度。如果我已经很好地理解了，我应该把提升按钮放入大小框中。然后，我将能够设置框的宽度或高度。正确吗?还有别的办法吗?
在每个按钮周围创建一个大小框有点乏味，所以我想知道为什么他们选择这样做。我很确定他们这么做有一个很好的理由，但我不这么认为。 对于初学者来说，脚手架很难阅读和构建。
new SizedBox(
width: 200.0,
height: 100.0,
child: ElevatedButton(
child: Text('Blabla blablablablablablabla bla bla bla'),
onPressed: _onButtonPressed,
),
),
当前回答
我们也可以使用ElevatedButton Widget，它有fixedSize属性。最新Flutter版本
ElevatedButton(
onPressed: () {},
style: ElevatedButton.styleFrom(
fixedSize: Size(120, 34), // specify width, height
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(
20,
))),
child: Text("Search"),
)
预览
其他回答
试试吧
Expanded(
child: RaisedButton(
onPressed: _onButtonPressed,
child: Text('Button1')
)
)
这对我很管用。Container提供高度，FractionallySizedBox提供RaisedButton的宽度。
Container(
height: 50.0, //Provides height for the RaisedButton
child: FractionallySizedBox(
widthFactor: 0.7, ////Provides 70% width for the RaisedButton
child: RaisedButton(
onPressed: () {},
),
),
),
我喜欢的方法来提高按钮与匹配父是包装它与容器。 下面是示例代码。
Container(
width: double.infinity,
child: RaisedButton(
onPressed: () {},
color: Colors.deepPurpleAccent[100],
child: Text(
"Continue",
style: TextStyle(color: Colors.white),
),
),
)
如果你想全局改变所有RaisedButtons的高度和minWidth，那么你可以在MaterialApp中覆盖ThemeData:
@override
Widget build(BuildContext context) {
return MaterialApp(
...
theme: ThemeData(
...
buttonTheme: ButtonThemeData(
height: 46,
minWidth: 100,
),
));
}
你可以创建全局方法，比如在整个应用程序中使用按钮。它会根据容器内的文本长度调整大小。FittedBox小部件用于使小部件适合它里面的子部件。
Widget primaryButton(String btnName, {@required Function action}) {
return FittedBox(
child: RawMaterialButton(
fillColor: accentColor,
splashColor: Colors.black12,
elevation: 8.0,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5.0)),
child: Container(
padding: EdgeInsets.symmetric(horizontal: 20.0, vertical: 13.0),
child: Center(child: Text(btnName, style: TextStyle(fontSize: 18.0))),
),
onPressed: () {
action();
},
),
);
}
如果你想要按钮的特定宽度和高度，你可以使用RawMaterialButton的约束属性来给出按钮的最小最大宽度和高度
constraints: BoxConstraints(minHeight: 45.0,maxHeight:60.0,minWidth:20.0,maxWidth:150.0),
