Flutter:如何使按钮扩展到其父级的大小?

zed5wv10  于 2023-05-19  发布在  Flutter
关注(0)|答案(9)|浏览(153)

我试图创建方形按钮,但扩展似乎不一样,因为它与容器。以下面的代码为例

new Expanded(
 flex: 2,
   child: new Column(
     children: <Widget>[
       new Expanded(
         child:new Row(
           children: <Widget>[
             new Expanded(child: new MaterialButton(...)),
             new Expanded(child: new MaterialButton(....)),

             new Expanded(child: new Container(color: Colors.red)),
             new Expanded(child: new Container(color: Colors.green)),
           ]
         )
       )
     ],
   )
 )

 ....

它显示两个水平展开但不垂直展开的按钮。与此同时,容器将水平和垂直地膨胀。如果我执行以下操作,也会产生同样的效果:

new Expanded(
 flex: 2,
   child: new Column(
     children: <Widget>[
       new Expanded(
         child:new Column(
           children: <Widget>[
             new Expanded(child: new MaterialButton(...)),
             new Expanded(child: new MaterialButton(....)),

             new Expanded(child: new Container(color: Colors.red)),
             new Expanded(child: new Container(color: Colors.green)),
           ]
         )
       )
     ],
   )
 )

 ....

在这里我把行改成了列。按钮将垂直展开,但不会水平展开,而容器将同时进行这两种操作。
有没有办法让我的按钮扩展到垂直和水平方向都适合它们的父级?

mwngjboj

mwngjboj1#

crossAxisAlignment属性添加到您的Row;

crossAxisAlignment: CrossAxisAlignment.stretch
xpcnnkqh

xpcnnkqh2#

使用ButtonThememinWidth: double.infinity Package 允许提供约束

ButtonTheme(
  minWidth: double.infinity,
  child: MaterialButton(
    onPressed: () {},
    child: Text('Raised Button'),
  ),
),

https://github.com/flutter/flutter/pull/19416着陆后

MaterialButton(
    onPressed: () {},
    child: SizedBox.expand(
      width: double.infinity, 
      child: Text('Raised Button'),
    ),
  ),
wtzytmuj

wtzytmuj3#

在Flutter 2.+中,考虑以下解决方案:

ElevatedButton(
  style: ElevatedButton.styleFrom(
    minimumSize: const Size(double.infinity, double.infinity), // <--- this line helped me
  ),
  onPressed: () {},
  child: Icon(
    Icons.keyboard_return
  ),
)
new9mtju

new9mtju4#

我们可以添加按钮内部容器。

解决方案:

Container(
            width: double.infinity,
            child: RaisedButton(
              onPressed: null,
              child: Text('NEXT'),
            ),
          )
p5fdfcr1

p5fdfcr15#

你也可以试试
1.使用SizedBox

SizedBox(
  width: double.maxFinite, // set width to maxFinite
  child: RaisedButton(...),
)

1.使用MaterialButtonminWidth属性。

MaterialButton(
  minWidth: double.maxFinite, // set minWidth to maxFinite
  color: Colors.blue,
  onPressed: () {},
  child: Text("Button"),
)
i5desfxk

i5desfxk6#

可以在“子项:列”下插入
交叉轴对齐:CrossAxisAlignment.stretch
我的代码

我的结果

l0oc07j2

l0oc07j27#

MaterialButton(
          minWidth: MediaQuery.of(context).size.width, // set minWidth to width of the device screen
          onPressed: () {},
          child: Text("Button"),
        )

供参考https://api.flutter.dev/flutter/widgets/MediaQuery-class.html

iovurdzv

iovurdzv8#

从文档和使用按钮主题与styleFrom实用程序静态方法,你可以这样写代码:

/// To specify buttons with a fixed width and the default height use
/// `fixedSize: Size.fromWidth(320)`. Similarly, to specify a fixed
/// height and the default width use `fixedSize: Size.fromHeight(100)`.
ElevatedButton(
          onPressed: () {},
          child: Text('text'),
          style: ElevatedButton.styleFrom(
      fixedSize: const Size.fromWidth(double.infinity),
    ),
  )
kq0g1dla

kq0g1dla9#

VisualDensity是你正在寻找的东西。将其添加到ButtonStyle对象。

ElevatedButton(
  style: const ButtonStyle(
    visualDensity: VisualDensity(
      horizontal: VisualDensity.maximumDensity,
      vertical: VisualDensity.maximumDensity,
    ),
  ),
  ...
),

相关问题