flutter - 如何在Flutter中将容器的宽度与其他容器匹配？

Question

嗨，我是Flutter的新手。我正在尝试开发一个有两个容器的屏幕。如上图所示，第一个容器的宽度对称，但是第二个容器的“日期和时间”比上面的容器小，因为它应该相等。这是我所做的:

  class _CurrentTabState extends State<CurrentTab> {
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.max,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Container(
          margin: EdgeInsets.symmetric(horizontal: 20, vertical: 20),
          padding: EdgeInsets.only(left: 20),
          height: 50,
          color: Colors.lightBlue,
          child: Align(
            alignment: Alignment.centerLeft,
            child: Text(
              "YOUR BOOKINGS",
              style: TextStyle(
                  color: Colors.white,
                  fontWeight: FontWeight.bold,
                  fontSize: 16),
            ),
          ),
        ),
        Container(
          padding: EdgeInsets.only(left: 20, right: 20),
          margin: EdgeInsets.symmetric(horizontal: 20),
          decoration: BoxDecoration(
              border: Border.all(
                  color: Colors.grey
              )
          ),
          child: Column(
            children: <Widget>[
              Text(
                  "Fri. 12 Jul - 18:00"
              )
            ],
          ),
        )
      ],
    );
  }
}

Answer 1

您可以给那些容器指定宽度，并且仍然保持它们的响应速度。我将向您展示两个选择:

如果希望他们使用整个屏幕宽度，则可以使用infinity常量:

Container(
  width: double.infinity,
),

然后，您可以在其两侧留出一些空间以填充。

使用MediaQuery:

Container(
  width: MediaQuery.of(context).size.width / 0.5, // Or whatever proportion you need.
),

如果使用第二个选项，则可能需要使其居中。您可以使用 mainAxisAlignment中的 Column实现:

return Column(
  mainAxisSize: MainAxisSize.max,
  crossAxisAlignment: CrossAxisAlignment.start,
  mainAxisAlignment: MainAxisAlignment.center,
  ...
);