我已经看到我无法ElevatedButton在 Flutter 中设置 a 的宽度。如果我很好理解，我应该ElevatedButton把SizedBox. 然后我将能够设置框的宽度或高度。这是对的吗？还有另一种方法吗？
在每个按钮周围创建一个有点乏味，SizedBox所以我想知道他们为什么选择这样做。我很确定他们有充分的理由这样做，但我不明白。对于初学者来说，脚手架很难阅读和构建。
new SizedBox(
width: 200.0,
height: 100.0,
child: ElevatedButton(
child: Text('Blabla blablablablablablabla bla bla bla'),
onPressed: _onButtonPressed,
),
),
正如这里的文档中所说
凸起按钮的最小尺寸为 88.0 x 36.0，可以使用 ButtonTheme 覆盖。
你可以这样做
ButtonTheme(
minWidth: 200.0,
height: 100.0,
child: RaisedButton(
onPressed: () {},
child: Text("test"),
),
);
match_parent（全屏宽度）：
SizedBox(
width: double.infinity, // <-- match_parent
height: double.infinity, // <-- match-parent
child: ElevatedButton(...)
)
或者
SizedBox.expand(
child: ElevatedButton(...)
)
具体宽度：
SizedBox(
width: 100, // <-- Your width
height: 50, // <-- Your height
child: ElevatedButton(...)
)
那是因为颤动与大小无关。这是关于约束的。
通常我们有两个用例：
Padding，它采用子约束并增加它。SizedBox，而且Column在拉伸模式下，...RaisedButton是第一种情况。这意味着它是定义自己的高度/宽度的按钮。并且，根据材质规则，凸起的纽扣尺寸是固定的。
您不希望这种行为，因此您可以使用第二种类型的小部件来覆盖按钮约束。
无论如何，如果您需要这个很多，请考虑创建一个新的小部件来为您完成这项工作。或者 use MaterialButton，它拥有一个 height 属性。
我建议使用 a MaterialButton，而不是像这样：
MaterialButton(
height: 40.0,
minWidth: 70.0,
color: Theme.of(context).primaryColor,
textColor: Colors.white,
child: new Text("push"),
onPressed: () => {},
splashColor: Colors.redAccent,
)
Flutter 2.0 RaisedButton已弃用并由ElevatedButton.
考虑到这一点，为自定义大小提供更简洁的方法ElevatedButton是小部件的minimumSize属性ElevatedButton。
输出
完整代码
ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.green,
onPrimary: Colors.white,
shadowColor: Colors.greenAccent,
elevation: 3,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(32.0)),
minimumSize: Size(100, 40), //////// HERE
),
onPressed: () {},
child: Text('Hey bro'),
)
注意：还请记住，相同的方法可以分别用于新的小部件，例如TextButton和OutlinedButtonusing 。TextButton.styleFrom(minimumSize: Size(100, 40))OutlinedButton.styleFrom(minimumSize: Size(100, 40))
您需要使用扩展小部件。但是，如果您的按钮位于列上，则扩展小部件会填充该列的其余部分。因此，您需要将 Expanded Widget 包含在一行中。
Row(children: <Widget>[
Expanded(
flex: 1,
child: RaisedButton(
child: Text("Your Text"),
onPressed: _submitForm,
),
),),])
我更喜欢用匹配父级制作 Raise 按钮的方法是用 Container 包装它。下面是示例代码。
Container(
width: double.infinity,
child: RaisedButton(
onPressed: () {},
color: Colors.deepPurpleAccent[100],
child: Text(
"Continue",
style: TextStyle(color: Colors.white),
),
),
)
使用 Media Query 为您的解决方案明智地使用宽度，这将在小屏幕和大屏幕上运行相同
Container(
width: MediaQuery.of(context).size.width * 0.5, // Will take 50% of screen space
child: RaisedButton(
child: Text('Go to screen two'),
onPressed: () => null
),
)
您也可以应用类似的解决方案SizeBox。
新按钮TextButton、ElevatedButton、OutlinedButton 等将以不同的方式进行更改。
我发现的一种方法来自这篇文章：您需要在按钮周围“收紧”一个受约束的框。
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Kindacode.com'),
),
body: Center(
child: ConstrainedBox(
constraints: BoxConstraints.tightFor(width: 300, height: 200),
child: ElevatedButton(
child: Text('300 x 200'),
onPressed: () {},
),
),
));
}
这段代码将帮助您更好地解决您的问题，因为我们不能直接为 RaisedButton 指定宽度，我们可以为它的孩子指定宽度
double width = MediaQuery.of(context).size.width;
var maxWidthChild = SizedBox(
width: width,
child: Text(
StringConfig.acceptButton,
textAlign: TextAlign.center,
));
RaisedButton(
child: maxWidthChild,
onPressed: (){},
color: Colors.white,
);
只需使用FractionallySizedBox, where widthFactor&heightFactor 定义应用程序/父级大小的百分比。
FractionallySizedBox(
widthFactor: 0.8, //means 80% of app width
child: RaisedButton(
onPressed: () {},
child: Text(
"Your Text",
style: TextStyle(color: Colors.white),
),
color: Colors.red,
)),
您可以创建全局方法，例如在整个应用程序中使用的按钮。它将根据容器内的文本长度调整大小。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),
如果您想全局更改所有 s 的高度和 minWidth ，那么您可以在您的内部RaisedButton覆盖：ThemeDataMaterialApp
@override
Widget build(BuildContext context) {
return MaterialApp(
...
theme: ThemeData(
...
buttonTheme: ButtonThemeData(
height: 46,
minWidth: 100,
),
));
}
将 RaisedButton 包裹在 Container 内，并为 Container Widget 提供宽度。
例如
Container(
width : 200,
child : RaisedButton(
child :YourWidget ,
onPressed(){}
),
)
我们使用Row或Column、Expanded、Container和元素来使用示例RaisedButton
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Padding(
padding: const EdgeInsets.symmetric(vertical: 10.0),
),
Row(
children: <Widget>[
Expanded(
flex: 2, // we define the width of the button
child: Container(
// height: 50, we define the height of the button
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 10.0),
child: RaisedButton(
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
textColor: Colors.white,
color: Colors.blue,
onPressed: () {
// Method to execute
},
child: Text('Copy'),
),
),
),
),
Expanded(
flex: 2, // we define the width of the button
child: Container(
// height: 50, we define the height of the button
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 10.0),
child: RaisedButton(
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
textColor: Colors.white,
color: Colors.green,
onPressed: () {
// Method to execute
},
child: Text('Paste'),
),
),
),
),
],
),
],
),
),
这对我有用。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: () {},
),
),
),
如果按钮放置在Flex小部件中（包括Row& Column），您可以使用扩展小部件将其包装以填充可用空间。
您可以按照他们在评论中所说的去做，或者您可以节省精力并使用 RawMaterialButton 。它拥有一切，您可以将边框更改为圆形和许多其他属性。ex shape（增加半径以获得更多圆形）
shape: new RoundedRectangleBorder(borderRadius: BorderRadius.circular(25)),//ex add 1000 instead of 25
你可以使用你想要的任何形状作为按钮，方法是使用 GestureDetector，它是一个小部件，并在子属性下接受另一个小部件。就像这里的另一个例子一样
GestureDetector(
onTap: () {//handle the press action here }
child:Container(
height: 80,
width: 80,
child:new Card(
color: Colors.blue,
shape: new RoundedRectangleBorder(borderRadius: BorderRadius.circular(25)),
elevation: 0.0,
child: Icon(Icons.add,color: Colors.white,),
),
)
)
SizedBox(
width: double.infinity,
child: ElevatedButton(
child: Text("FULL WIDTH"),
onPressed: () {},
),
),
使用 ElevatedButton，因为 RaisedButton 已被弃用
试试看
Expanded(
child: RaisedButton(
onPressed: _onButtonPressed,
child: Text('Button1')
)
)
如果您不想删除所有设置的按钮主题。
ButtonTheme.fromButtonThemeData(
data: Theme.of(context).buttonTheme.copyWith(
minWidth: 200.0,
height: 100.0,,
)
child: RaisedButton(
onPressed: () {},
child: Text("test"),
),
);
在我的例子中，我使用 margin 来改变大小：
Container(
margin: EdgeInsets.all(10),
// or margin: EdgeInsets.only(left:10, right:10),
child: RaisedButton(
padding: EdgeInsets.all(10),
shape: RoundedRectangleBorder(borderRadius:
BorderRadius.circular(20)),
onPressed: () {},
child: Text("Button"),
),
),
如果您在 Column() 中有一个按钮并且希望该按钮具有最大宽度，请设置：
crossAxisAlignment：CrossAxisAlignment.stretch
在您的列小部件中。现在此 Column() 下的所有内容都将具有最大可用宽度
全宽按钮的简短而甜蜜的解决方案：
Row(
children: [
Expanded(
child: ElevatedButton(...),
),
],
)