Flutter中如何设置Container内按钮的固定宽高？

嘿，我明白你遇到的麻烦了——明明给按钮套了SizedBox和ButtonTheme，但它还是跟着Container的宽高走，完全不听使唤！这其实是Container的默认布局行为在搞鬼，我来给你拆解一下原因，再给几个靠谱的解决方案。

问题根源 #

Container默认会强制让子组件填充自己的全部可用空间，你的SizedBox虽然设置了宽高，但在没有指定对齐方式的Container里，它会被直接拉伸成和Container一样大，里面的按钮自然也跟着变大了，ButtonTheme的设置就被覆盖掉了。

解决方案1：给Container添加alignment属性 #

最简单的办法就是给Container加上alignment，这样它就不会拉伸子组件，而是按照你指定的位置摆放，SizedBox的宽高就能生效了：

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

void main() {
  debugPaintSizeEnabled = true;
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        body: SafeArea(
          child: Container(
            height: 65,
            width: double.infinity,
            color: Colors.black,
            // 添加这行，让子组件居中且不被拉伸
            alignment: Alignment.center,
            child: SizedBox(
              height: 50,
              width: 50,
              child: ButtonTheme(
                minWidth: 50,
                height: 50,
                child: FlatButton(
                  onPressed: () {},
                  color: Colors.red,
                  child: Text("Test"),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

解决方案2：用Align组件包裹按钮 #

如果不想修改Container的alignment，也可以用Align组件把SizedBox包起来，同样能固定按钮的大小：

// 替换Container的child部分
child: Align(
  alignment: Alignment.center,
  child: SizedBox(
    height: 50,
    width: 50,
    child: ButtonTheme(
      minWidth: 50,
      height: 50,
      child: FlatButton(
        onPressed: () {},
        color: Colors.red,
        child: Text("Test"),
      ),
    ),
  ),
),

解决方案3：使用新版按钮组件（推荐） #

另外要提一句，FlatButton在Flutter 2.0之后已经被弃用了，官方推荐用TextButton替代，而且可以直接通过style设置固定宽高，不用再嵌套SizedBox和ButtonTheme，代码更简洁：

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

void main() {
  debugPaintSizeEnabled = true;
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        body: SafeArea(
          child: Container(
            height: 65,
            width: double.infinity,
            color: Colors.black,
            alignment: Alignment.center,
            child: TextButton(
              onPressed: () {},
              style: TextButton.styleFrom(
                fixedSize: Size(50, 50), // 直接设置固定宽高
                backgroundColor: Colors.red,
              ),
              child: Text("Test"),
            ),
          ),
        ),
      ),
    );
  }
}

试试上面的方法，按钮就能乖乖变成50x50的大小啦！

内容的提问来源于stack exchange，提问作者Axel