如何在Flutter中设置ElevatedButton的大小？

Question

我无法在 Flutter 中设置提升按钮的大小。我尝试将其放入一个大小合适的盒子中，但我的代码不起作用。我不确定尺寸从何而来，但我无法更改它。

这是我的代码：

  Widget build(BuildContext context) {
    return SizedBox(
      width: 60,
      height: 60,
      child: Padding(
        padding: const EdgeInsets.only(top: 20, bottom: 20),
        child: ElevatedButton(
          onPressed: () {},
          style: ElevatedButton.styleFrom(
            elevation: 10,
            backgroundColor: Colors.deepOrange,
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(30), // <-- Radius
            ),
            padding: EdgeInsets.all(4),
          ),
          child: Text(
            table.tableNumber,
            style: TextStyle(
              color: Colors.white,
              fontWeight: FontWeight.normal,
              fontSize: 20,
            ),
            overflow: TextOverflow.ellipsis,
            maxLines: 1,
            textAlign: TextAlign.left,
          ),
        ),
      ),
    );
  }

从我的脚手架：

class TablesShopView extends StatefulWidget {
  const TablesShopView({super.key});

  @override
  State<StatefulWidget> createState() => TablesShopViewState();
}

class TablesShopViewState extends State<TablesShopView> {
  @override
  void initState() {
    WidgetsBinding.instance.addPostFrameCallback((_) => showSnackBar(context));
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Theme.of(context).backgroundColor,
      resizeToAvoidBottomInset: false,
      body: Container(
        decoration: BoxDecoration(
          gradient: LinearGradient(
              colors: [appBackgroundColorStart, appBackgroundColorEnd],
              begin: Alignment.topLeft,
              end: Alignment.bottomRight),
        ),
        child: Padding(
          padding: const EdgeInsets.all(20.0),
          child: SingleChildScrollView(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                const SizedBox(height: 12),
                const TablesShop(),
              ],
            ),
          ),
        ),
      ),
    );
  }
}


class TablesShop extends StatelessWidget {
  const TablesShop({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return BaseWidget<TablesModel>(
      model: TablesModel(api: Provider.of(context, listen: false)),
      onModelReady: (model) => model.fetchTables(),
      child: const SizedBox.shrink(),
      builder: (context, model, child) => model.busy
          ? const Center(
              child: CircularProgressIndicator(),
            )
          : GridView.builder(
              scrollDirection: Axis.vertical,
              shrinkWrap: true,
              physics: const NeverScrollableScrollPhysics(),
              padding: const EdgeInsets.all(10.0),
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisSpacing: 10.0,
                mainAxisSpacing: 10.0,
                crossAxisCount: 5,
                // childAspectRatio: MediaQuery.of(context).size.width /
                //     (MediaQuery.of(context).size.width),
              ),
              itemCount: model.tables.length,
              itemBuilder: (context, index) => TableShopListItem(
                table: model.tables[index],
              ),
            ),
    );
  }
}

编辑：因为 Gridview 始终保持其纵横比，如下面接受的答案中所述，所以我的解决方案是完全删除大小框和升高的按钮尺寸，并将圆半径增加到 300。网格

crossAxisCount

为 5，这在任何屏幕尺寸下都能保持完美的圆形。虽然按钮尺寸会随着屏幕尺寸的变化而变化，但对我来说仍然有效。

Answer 1

您可以简单地将提升的按钮包裹在大小框小部件中，并放置您想要的宽度和高度。

Answer 2

为您的案例使用

Wrap

小部件。 GridItem 将保持其子项的宽高比。 至于形状，我认为你正在尝试得到

 shape: CircleBorder(),

/

shape: StadiumBorder(),

 return Wrap(
      children: [
        for (int i = 0; i < 33; i++)
          TableShopListItem(
           ....
          ),
      ],
    );

如果顶部小部件不处理滚动事件，请包装

Wrap

小部件可滚动小部件。

您可以查看更多有关约束

的信息

Answer 3

您可以给按钮指定固定大小：

ElevatedButton(
 onPressed: (){},
 style: ElevatedButton.styleFrom(
   fixedSize: const Size(150, 50)
  ),
 child: const Text("Press Me")
)

Answer 4

 ElevatedButton(
    onPressed: () {
    // Button action
    },
    style: ElevatedButton.styleFrom(
    minimumSize: const Size(double.infinity, 48),  // width, height
 ),