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

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

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

当前回答

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

其他回答

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

通常我们有两个用例:

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

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

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


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

我们使用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'),
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ),
SizedBox(
  width: double.infinity,
  child: ElevatedButton(
    child: Text("FULL WIDTH"),
    onPressed: () {},
  ),
),

使用ElevatedButton,因为RaisedButton已弃用

在Flutter 2.0中,RaisedButton已弃用,并被ElevatedButton取代。

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

输出

完整代码

          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和OutlinedButton使用TextButton。styleFrom(minimumSize: Size(100,40))和outline button。styleFrom(minimumSize: Size(100,40))分别。

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