如何禁用容器子级展开？

Question

所以我在脚手架（材料）中得到了一个容器。但是，如果我添加一个 ElevatedButton 作为此容器的子级，则 ElevatedButton 按钮将扩展到父容器的完整大小。我怎样才能避免它？

不知道是flutter安装的问题还是我的问题。

这是代码。

class Login extends StatefulWidget {
  const Login({Key? key}) : super(key: key);

  @override
  _LoginState createState() => _LoginState();
}

class _LoginState extends State<Login> {
  String status = "Status: OK";
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.teal,
      appBar: AppBar(
        backgroundColor: Colors.teal,
        elevation: 0,
        centerTitle: true,
        automaticallyImplyLeading: false,
        title: Text(status),
      ),
      body: Center(
        child: Column(
          children: [
            SubmitContainer(),
          ],
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Container(
      child: TextField(),
      width: 200,
      height: 200,
      color: Colors.yellow,
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Container(
      child: SizedBox(
        child: ElevatedButton(
          child: Text("GO"),
          onPressed: () {},
        ),
        width: 300,
        height: 50,
      ),
      width: MediaQuery.of(context).size.width,
    );
  }
}

最终结果如下所示：

Answer 1

当我们使用 FittedBox 时，它会占据内容宽度。使用 FittedBox 作为按钮。

Container(
        child: SizedBox(
          child: FittedBox(
            child: ElevatedButton(
              child: Text("GO"),
              onPressed: () {},
            ),
          ),
          width: 300,
          height: 50,
        ),
        width: MediaQuery.of(context).size.width,
      );

Answer 2

另一种可能的解决方案是将按钮包裹UnconstrainedBox 小部件：“一个对其子部件不施加任何限制的小部件，允许其以其“自然”尺寸呈现。”

Answer 3

尝试使用 Center 小部件包装您的 Container 小部件的子部件
这样，即使容器本身很宽，内容也将具有自动宽度。

Container(
  child: Center(
    child: //...
  ),
)

请从文档中查看此页面以获取更多信息
https://docs.flutter.dev/development/ui/layout/约束#example-3

Answer 4

你做错了。在 SubmitContainer 的容器小部件内，您定义了 width: MediaQuery.of(context).size.width,，这就是提升按钮拉伸以匹配全屏宽度的原因。只需使用执行以下操作：

SizedBox(
        child: ElevatedButton(
          child: Text("GO"),
          onPressed: () {},
        ),
        width: 150,
        height: 50,
      );