Flutter中如何设置Container内Button的宽高？

嘿，我完全懂你遇到的这个坑——想在一个占满屏幕宽度、高65的黑色Container里放个50×50的红色按钮，结果不管套SizedBox还是用ButtonTheme，按钮都被拉得和Container一样宽。这其实是Container默认的布局逻辑在搞鬼！

问题根源 #

Container在没设置alignment属性的时候，它的子Widget会被自动拉伸填满整个容器的可用空间。你套的SizedBox虽然设了宽高，但在这种规则下根本起不到限制作用，直接被Container的布局优先级覆盖了。另外，FlatButton本身自带默认最小宽高，ButtonTheme的设置也容易和父容器的拉伸行为冲突。

解决方案 #

这里给你几个实用的解决办法，选你顺手的用就行：

方法1：给Container添加alignment属性

这是最简单的方式，只要给Container加上alignment，它就不会再拉伸子Widget，而是尊重子Widget自身的尺寸，同时你还能控制按钮的位置：

import 'package:flutter/material.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: Alignment.center,
            child: SizedBox(
              height: 50,
              width: 50,
              child: FlatButton(
                onPressed: () {},
                color: Colors.red,
                child: Text("Test"),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

方法2：用Align包裹按钮

如果不想修改Container的全局alignment，也可以用Align Widget单独控制按钮的布局，效果和上面一致：

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

方法3：用TextButton替代FlatButton（推荐）

FlatButton已经被官方废弃了，现在更推荐使用TextButton，配合它的style属性可以直接设置固定尺寸，不用额外套SizedBox：

import 'package:flutter/material.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"),
            ),
          ),
        ),
      ),
    );
  }
}

试一下这些方法，按钮就能乖乖保持50×50的尺寸啦！

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