flutter - 为什么在 SingleChildScrollView 内的小部件上使用 flex 时出现错误

Question

我试图让我的应用程序中的一些文本在使用不同的手机时更能响应大小的变化。所以我开始在一个灵活的小部件中包装一些文本小部件。这会导致此错误。

显然这是一个尺寸问题，我似乎无法找到解决方案。我需要改变我如何构建它吗？

这是相关代码

return SingleChildScrollView(
        child: Flex(direction: Axis.vertical, children: [
      Column(children: [
        Padding(
          padding: EdgeInsets.only(top: 10),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                'Funds',
                style:
                    TextStyle(color: Colors.black, fontWeight: FontWeight.bold),
              )
            ],
          ),
        ),
        Flexible(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Flexible(
                flex: 1,
                fit: FlexFit.loose,
                child: Text(
                  '\$${DATA}',
                  style: TextStyle(
                      color: Colors.black, fontWeight: FontWeight.bold),
                ),
              ),
              Flexible(
                flex: 1,
                fit: FlexFit.loose,
                child: Text(
                  '\$${DATA}',
                  style: TextStyle(
                      color: Colors.black, fontWeight: FontWeight.bold),
                ),
              ),
              Flexible(
                flex: 1,
                fit: FlexFit.loose,
                child: Text(
                  '\$${DATA}',
                  style: TextStyle(
                      color: Colors.black, fontWeight: FontWeight.bold),
                ),
              ),
              Flexible(
                flex: 1,
                fit: FlexFit.loose,
                child: Text(
                  '\$${DATA}',
                  style: TextStyle(
                      color: Colors.black, fontWeight: FontWeight.bold),
                ),
              )
            ],
          ),
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Flexible(
              flex: 1,
              fit: FlexFit.loose,
              child: Text(
                truncator('${DATA}', 2,
                    CutStrategy()),
                style:
                    TextStyle(color: Colors.black, fontWeight: FontWeight.bold),
              ),
            ),
            Flexible(
              flex: 1,
              fit: FlexFit.loose,
              child: Text(
                truncator('${DATA}', 2,
                    CutStrategy()),
                style:
                    TextStyle(color: Colors.black, fontWeight: FontWeight.bold),
              ),
            ),
            Flexible(
              flex: 1,
              fit: FlexFit.loose,
              child: Text(
                truncator('${DATA}', 2,
                    CutStrategy()),
                style:
                    TextStyle(color: Colors.black, fontWeight: FontWeight.bold),
              ),
            ),
            Flexible(
              flex: 1,
              fit: FlexFit.loose,
              child: Text(
                truncator('${DATA}', 2,
                    CutStrategy()),
                style: TextStyle(
                    color: Colors.black,
                    fontWeight: FontWeight.bold,
                    fontSize: 13),
              ),
            )
          ],
        ),
      ])
    ]));

标签： flutterflutter-layout

Answer 1

您不需要使用Flex,Flexible或Expanded内部可滚动小部件。