我发现无法在扑动中设置提升按钮的宽度。如果我已经很好地理解了,我应该把提升按钮放入大小框中。然后,我将能够设置框的宽度或高度。正确吗?还有别的办法吗?

在每个按钮周围创建一个大小框有点乏味,所以我想知道为什么他们选择这样做。我很确定他们这么做有一个很好的理由,但我不这么认为。 对于初学者来说,脚手架很难阅读和构建。

new SizedBox(
  width: 200.0,
  height: 100.0,
  child: ElevatedButton(
    child: Text('Blabla blablablablablablabla bla bla bla'),
    onPressed: _onButtonPressed,
  ),
),

当前回答

我们使用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'),
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ),

其他回答

要设置任何按钮的高度和宽度,只需用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')),],),

我们也可以使用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"),
        )

预览

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

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

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