容器的动态大小 - Flutter

Question

我是 Flutter 的新手，遇到了 Container 小部件大小的问题，它具有 Row 和 Column，因为它是 child。我的目标是使用动态数据呈现 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
   ],
  ),
 ),
)

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

Answer 1

行或列的 mainAxisSize 属性默认为最大。

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

Answer 2

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

例如你可以创建一个变量

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

并为您使用它 Container 或 fontsize 例如

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

容器的动态大小 - Flutter

Dynamic size of container - Flutter

user-interface

containers

flutter

flutter-layout