如何禁用 Container childs 扩展？

Question

所以我在脚手架中得到了一个容器 (Material)。但是，如果我添加一个 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

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

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

Answer 2

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

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

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

Answer 3

当我们使用FittedBox时它占据了内容的宽度。将 FittedBox 用于 Button。

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

如何禁用 Container childs 扩展？

How do i disable Container childs to expand?

mobile

dart

flutter