容器的动态大小 - Flutter答案

【问题标题】：Dynamic size of container - Flutter容器的动态大小 - Flutter
【发布时间】：2021-11-19 00:49:40
【问题描述】：

我是 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 小部件只占用与其孩子占用的空间一样多的空间。我的目标设计看起来像这样

【问题讨论】：

标签： flutter user-interface containers flutter-layout

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

例如你可以创建一个变量

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

并为您使用它，例如容器或字体大小

导入'package: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（在一行或一列内）。

【讨论】：