使一行中的按钮在 Flutter 时具有相同的宽度

nhn9ugyo  于 2023-05-19  发布在  Flutter
关注(0)|答案(5)|浏览(152)

如果我想在一个Row中制作两个或更多的Buttons以获得相同的Width,我该如何制作?例如,我有三个不同标题的RaisedButtons,比如说ApproveRejectNeed Revise,如果我把三个Button放在Row中,它们会有不同的Width,我不想要它。我需要的是他们有相同的Width

a2mppw5e

a2mppw5e1#

您可以使用Row Package 您的孩子Expanded

Row(
  children: <Widget>[
    Expanded(
      child: RaisedButton(
        child: Text('Approve'),
        onPressed: () => null,
      ),
    ),
    Expanded(
      child: RaisedButton(
        child: Text('Reject'),
        onPressed: () => null,
      ),
    ),
    Expanded(
      child: RaisedButton(
        child: Text('Need Revise'),
        onPressed: () => null,
      ),
    )
  ],
);
k10s72fa

k10s72fa2#

有两种方法:
1.扩展的小部件,它将划分空间在相等的部分。如果您使用所有扩展的小部件的行列。
1.获取屏幕的宽度并将其平均划分为所需的大小。
Double width = MediaQuery.of(context).size.width;

1u4esq0p

1u4esq0p3#

用intrinsicWidth和按钮(任何小部件)用Expanded Package ,这将给予你所有的小部件具有相同的宽度和宽度将等于按钮的最大大小。

class MyWidget extends StatelessWidget {

 @override
  Widget build(BuildContext context) {
    return IntrinsicWidth(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        mainAxisSize: MainAxisSize.min,
        children: [
           Expanded(
            child: RaisedButton(
              child: Text('Approve'),
              onPressed: () => null,
            ),
          ),
          Expanded(
            child: RaisedButton(
              child: Text('Reject'),
              onPressed: () => null,
            ),
         ),
         Expanded(
           child: RaisedButton(
             child: Text('Need Revise'),
             onPressed: () => null,
           ),
          )
        ],
      ),
    );
  }
}
wkyowqbh

wkyowqbh4#

可以使用新的按钮样式:

ElevatedButtonTheme(
      data: ElevatedButtonThemeData(style: ElevatedButton.styleFrom(minimumSize: Size(120,60))) ,
      child: ButtonBar(
        mainAxisSize: MainAxisSize.max,
        children: [
          ElevatedButton(
            child: Text('Ok'),
            onPressed: () {},
          ),
          ElevatedButton(
            child: Text('Cancel'),
            onPressed: () {},
          ),
        ],
      ),
    ),

虽然diegoveler的回答更快

j91ykkif

j91ykkif5#

在MaterialApp ThemeData widget的Button的style属性中使用Button的minimumSize,使button在flutter中具有相同的宽度:

theme: ThemeData(
      elevatedButtonTheme: ElevatedButtonThemeData(
        style: ElevatedButton.styleFrom(
            minimumSize: const Size(250, 50),
            backgroundColor: Colors.blueGrey,
            textStyle: const TextStyle(fontSize: 20, fontWeight: FontWeight.bold)
        ),
      ),
    ),

相关问题