容器的动态大小 - Flutter

Question

我是 flutter 的新手，遇到了Container小部件的大小问题，它的子元素是Row和Column 。 我的目标是使用动态数据呈现Column和Row小部件。 代码如下。

Container(
 decoration: BoxDecoration(
  borderRadius: BorderRadius.circular(35),
  color: Colors.orange.shade400,
 ),
 child: Padding(
  padding: const EdgeInsets.symmetric(vertical: 15.0, horizontal: 25.0),
  child: Column(
   children: <Widget>[
    Text("PEAK/THURSDAY"),
    Text("\$24,355"),
    weeklyExpenseBuilder(), // Row with Text widgets
   ],
  ),
 ),
)

不固定容器的大小允许它占用所有屏幕空间，但固定它的高度会导致RenderFlex overflow错误。 有什么方法可以让Container小部件占用的空间与其子部件占用的空间一样多。 我的目标设计看起来像这样

Answer 1

Row 或 Column 的 mainAxisSize 属性默认为 max。

尝试在行和列上设置 mainAxisSize: MainAxisSize.min 并添加一些间距。

Answer 2

您应该始终使尺寸与屏幕的宽度和高度相关，以使应用程序完美响应

例如你可以创建一个变量

 double width = MediaQuery.of(context).size.width;
 double height = MediaQuery.of(context).size.height; 

并为您使用 Container 或 fontsize 例如

导入“包：flutter/material.dart”；

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

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

class _TestWidgetState extends State<TestWidget> {
  @override
  Widget build(BuildContext context) {
    double width = MediaQuery.of(context).size.width;
    double height = MediaQuery.of(context).size.height;
    return Container(
      height: height,
      width: width / 2,
      child: Text('test',
          style: TextStyle(
            fontSize: width * 0.035,
          )),
    );
  }
}

为了避免溢出，您始终可以使用 Wrap 或 Expanded（在行或列内）。