如何在扑动中设置按钮的宽度和高度?

我已经看到我不能在Flutter中设置ElevatedButton的宽度。如果我已经很好地理解了，我应该将ElevatedButton放入SizedBox中。然后，我将能够设置框的宽度或高度。正确吗?还有别的办法吗?

在每个按钮周围创建SizedBox有点乏味，所以我想知道为什么他们选择这样做。我很确定他们这么做有一个很好的理由，但我不这么认为。 对于初学者来说，脚手架很难阅读和构建 
new SizedBox(
width: 200.0,
height: 100.0,
child: ElevatedButton(
child: Text('Blabla blablablablablablabla bla bla bla'),
onPressed: _onButtonPressed,
),
),
377969 次浏览
小开

这是因为颤振与大小无关。这是关于约束的。

通常我们有两个用例:

  • 小部件的子部件定义约束。父大小本身就是基于该信息的。Padding，它接受子约束并增加它。
  • 父节点对子节点强制执行约束。例如:SizedBox，但也在拉伸模式下Column，…

RaisedButton是第一个情况。这意味着按钮定义了它自己的高度/宽度。并且，根据材质规则，凸起的纽扣尺寸是固定的。

您不想要这种行为，因此可以使用第二种类型的小部件来覆盖按钮约束。

无论如何，如果你非常需要这个功能，可以考虑创建一个新的小部件来完成这项工作。或者使用MaterialButton，它拥有一个height属性。

小开

我建议使用MaterialButton，然后你可以这样做:

MaterialButton(
height: 40.0,
minWidth: 70.0,
color: Theme.of(context).primaryColor,
textColor: Colors.white,
child: new Text("push"),
onPressed: () => {},
splashColor: Colors.redAccent,
)
小开
最佳答案

如文档在这里中所述

凸起按钮的最小尺寸为88.0 * 36.0

你可以这样做

ButtonTheme(
minWidth: 200.0,
height: 100.0,
child: RaisedButton(
onPressed: () {},
child: Text("test"),
),
);
小开

如果按钮被放置在Flex小部件中(包括Row &Column)，可以使用扩大小部件来填充可用空间。

小开

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(...)
)
小开

这段代码将帮助你更好地解决你的问题，因为我们不能直接为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,
);
小开

您需要使用扩展小部件。但是，如果按钮位于列上，则Expanded Widget将填充列的其余部分。因此，您需要将Expanded Widget包含在一行中。

Row(children: <Widget>[
Expanded(
flex: 1,
child: RaisedButton(
child: Text("Your Text"),
onPressed: _submitForm,
),
),),])
小开

如果你想全局改变所有__abc0的高度和minWidth，那么你可以在你的MaterialApp中覆盖ThemeData:

 @override
Widget build(BuildContext context) {
return MaterialApp(
...
theme: ThemeData(
...
buttonTheme: ButtonThemeData(
height: 46,
minWidth: 100,
),
));
}
小开

你可以像他们在评论中说的那样做，或者你可以节省精力，使用RawMaterialButton。什么都有，你可以把边界变成圆形 还有很多其他属性。exshape(增加半径以获得更圆的形状)

shape: new RoundedRectangleBorder(borderRadius: BorderRadius.circular(25)),//ex add 1000 instead of 25

你可以使用你想要的任何形状作为按钮通过使用手势检测器，这是一个小部件，并在子属性下接受另一个小部件。 就像在这里的另一个例子

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,),
),
)
)
小开
我更喜欢的方法来提高按钮匹配父是用容器包装它。 下面是示例代码 
Container(
width: double.infinity,
child: RaisedButton(
onPressed: () {},
color: Colors.deepPurpleAccent[100],
child: Text(
"Continue",
style: TextStyle(color: Colors.white),
),
),
)
小开

将RaisedButton包装在容器内，并为容器小部件赋予宽度。

如

 Container(
width : 200,
child : RaisedButton(
child :YourWidget ,
onPressed(){}
),
)
小开

你可以创建全局方法，比如在整个应用程序中使用按钮。它会根据容器内的文本长度调整大小。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),
小开

在我的例子中，我使用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"),
),
),
小开

使用媒体查询明智地使用宽度为您的解决方案，这将运行相同的小屏幕和大屏幕

  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应用类似的解决方案。

小开

只需使用FractionallySizedBox，其中widthFactor &heightFactor定义app/parent大小的百分比。

FractionallySizedBox(
widthFactor: 0.8,   //means 80% of app width
child: RaisedButton(
onPressed: () {},
child: Text(
"Your Text",
style: TextStyle(color: Colors.white),
),
color: Colors.red,
)),
小开

试试吧

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"),
),
);
小开

全宽按钮的简短而甜蜜的解决方案:

Row(
children: [
Expanded(
child: ElevatedButton(...),
),
],
)
小开

如果你在Column()中有一个按钮，并希望该按钮具有最大宽度，设置:

crossAxisAlignment: CrossAxisAlignment.stretch

在Column小部件中。现在这个Column()下的所有内容都将具有最大可用宽度

小开

这对我很管用。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: () {},
),
),
),
小开

我们使用行或列， 扩大， 容器和元素来使用例子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'),
),
),
),
),
],
),
],
),
),
小开

新按钮TextButton, ElevatedButton, outline button等。将以不同的方式进行更改。

我发现的一个方法来自这篇文章:你需要"tight "按钮周围的约束框。

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: () {},
),
),
));
}
小开

在颤振2.0中，RaisedButton已弃用，并被ElevatedButton取代。

考虑到这一点，更清洁的方法为ElevatedButton提供自定义大小是ElevatedButton小部件的minimumSize属性。

输出

enter image description here

完整代码

          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.styleFrom(minimumSize: Size(100, 40))和OutlinedButton.styleFrom(minimumSize: Size(100, 40))在诸如TextButton和OutlinedButton这样的新小部件中使用。

小开 
SizedBox(
width: double.infinity,
child: ElevatedButton(
child: Text("FULL WIDTH"),
onPressed: () {},
),
),

使用ElevatedButton，因为RaisedButton已弃用

小开

试试Container，我想我们会有更多的控制。

ElevatedButton(
style: ElevatedButton.styleFrom(textStyle: const TextStyle(fontSize: 20)),
onPressed: () {
buttonClick();
},
child:  Container(
height: 70,
width: 200,
alignment: Alignment.center,
child: Text("This is test button"),
),


),
小开

我努力解决这个问题，并发现我的问题是:我在一个ListView中定义了我所有的按钮。不管我做了什么，按钮的宽度总是屏幕的宽度。我用列替换ListView，瞧，突然我可以控制按钮宽度。

小开

使用带有宽度和高度参数的SizeBox

< p > SizedBox ( 宽度:double.infinity, 高度:55.0, 孩子:ElevatedButton ( ...．． )， < / p >);
小开

在我的例子中(按钮是一个水平ListView的子)，我必须用填充小部件包装按钮，并设置右/左填充。

      Padding(
padding: const EdgeInsets.only(right: 50, left: 50),
child: ElevatedButton(onPressed: () {}, child: Text("LOGOUT")),
)

enter image description here

小开

您不需要使用其他小部件来设置大小。你可以为ElevatedButton使用minimumSize

ElevatedButton(
style: ElevatedButton.styleFrom(
minimumSize: const Size(200, 50),
elevation: 0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(50), // <-- Radius
),
),
onPressed: (){},
child: const Text("Text", style: TextStyle(fontSize: 20, fontWeight: FontWeight.w500),),
),
小开
要设置任何按钮的高度和宽度，只需用sizebox包装它。你可以轻松地设置任何按钮的高度和宽度的包装与sizebox。 如果你想给任何类型的小部件之间的空间，那么你可以使用大小框，在大小框内，你可以使用高度
小开

用Column PLUS包装你的ElevatedButton，为样式的按钮添加填充:

                          Column(
children: [
ElevatedButton(
style: TextButton.styleFrom(
backgroundColor: Colors.green,
padding: const EdgeInsets.symmetric(
horizontal: 20 * 1.5, vertical: 20),
),
onPressed: () {},
child: const Text('text')),],),

提交答案