Flutter：无限宽度

Question

我正在做颤振课程，这是我的相关代码：

Container(
                  color: kBottomContainerColour,
                  margin: EdgeInsets.only(top: 10.0),
                  width: double.infinity,
                  height: kBottomContainerHeight,
                ),

我不断收到这个：

These invalid constraints were provided to _RenderColoredBox's layout() function by the following function, which probably computed the invalid constraints in question:
  RenderConstrainedBox.performLayout (package:flutter/src/rendering/proxy_box.dart:268:14)
The offending constraints were: BoxConstraints(w=Infinity, h=80.0)
The relevant error-causing widget was: 
  Container file:///F:/Works/Projects/flutter/Flutter-Course-Resources/bmi-calculator-flutter1/lib/input_page.dart:241:24

虽然在课程中运行良好 请帮忙

Answer 1

而不是

 width: double.infinity

，

使用，

width: MediaQuery.of(context).size.width

Answer 2

不要使用double.infinity。使用 MediaQuery 从当前小部件上下文中获取大小，并从中获取宽度。 在这种情况下，请执行以下操作：

Container(color: kBottomContainerColour,
                  margin: EdgeInsets.only(top: 10.0),
                  width: MediaQuery.of(context).size.width
                  height: kBottomContainerHeight,
                ),

请注意，每次您使用MediaQuery时，小部件都会重新加载其状态。因此，请确保分解您的小部件，并遵循谷歌的性能指南：

https://flutter.dev/docs/perf/rendering/best-practices

Answer 3

自 2024 年起，您可以使用

MediaQuery.sizeOf(context).width

仅在调整大小时重绘：

使用 MediaQuery.of 进行查询将导致您的小部件重建 每当 MediaQueryData 的任何字段发生变化时（例如， 如果用户旋转他们的设备）。因此，除非您担心 随着整个 MediaQueryData 对象的变化，更喜欢使用 特定方法（例如：MediaQuery.sizeOf 和 MediaQuery.paddingOf).

https://api.flutter.dev/flutter/widgets/MediaQuery-class.html