容器动态大小-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

行或列的 mainAxisSize 属性默认为 max。

尝试在行和列上设置

mainAxisSize: MainAxisSize.min

并添加一些间距。

Answer 2

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

例如，您可以创建一个变量

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

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

导入'包：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,
          )),
    );
  }
}

为了避免溢出，您始终可以使用“换行”或“展开”（在行或列内）。