Flutter - 使用列表视图生成器在列中创建可滚动子项

Question

我正在构建一个计算器应用程序，其中我想要一个可滚动的子项用于之前的计算，但是因为我已经使用 Column 来列出不同的 Widgets，所以它向我显示了 hassize 类型的错误。

下面是设计的一部分的图像，其中选择了我想要滚动的区域

这是我为视图（页面）编写的代码

SafeArea(
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.end,
      children: [
        ThemeSwitcher(height: height),
        Padding(
          padding: EdgeInsets.only(top: height * 0.15, right: width * 0.03),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.end,
            children: [
// From here I want the Widget to be Scollable based on the List declared before
              Container(
                child: SingleChildScrollView(
                  child: Column(children: [
                    ListView.builder(
                      itemBuilder: (context, index) => Text(
                        textEval[index],
                        style: TextStyle(
                          fontSize: (width * 0.045),
                          fontWeight: FontWeight.w500,
                          height: 2,
                        ),
                      ),
                    )
                  ]),
                ),
              ),
// The Elements between these two comments I want to be in a scrollable child view
              Text(
                textEval[textEval.length - 2],
                style: TextStyle(
                  fontSize: (width * 0.045),
                  fontWeight: FontWeight.w500,
                  height: 2,
                ),
              ),
              Text(
                mainText,
                style: TextStyle(
                  fontSize: (width * 0.08),
                  fontWeight: FontWeight.w500,
                  height: 2,
                ),
              ),
            ],
          ),
        )
      ],
    ),
  ),

谁能告诉我如何实现这一目标？

Answer 1

只需用 SizedBox 包装 ListView.builder 并设置高度和宽度

Answer 2

用 SingleChildScrollView() 包裹列。

Answer 3

这是 Flutter 中的常见模式。您可能已经尝试过

Column(
    children: [
        ...,
        SingleChildScrollView(
            child: Column()   // 2nd column
        )
    ]
)

它不起作用，因为 SingleChildScrollView 可以采用无限高，而 Column 可以允许无限高。

解决这个问题的最简单方法是使用 Expanded 小部件包装 SingleChildScrollVIew

Column(
    children: [
        ...,
        Expanded(
             child: SingleChildScrollView(
                   child: Column()   // 2nd column
             )
        )
    ]
)

这将使 SingleChildScrollView 采用 Column 中的剩余高度。 但是，如果您希望它是特定值的高度，则将 Expanded 替换为指定高度的 Sizedbox。

Answer 4

您可以通过删除额外的小部件（如Column ）来简化结构。

用Expanded包裹SingleChildScrollView以获得可滚动的孩子的可用空间。

虽然SingleChildScrollView已经处理滚动事件ListView.builder滚动事件将重叠并导致问题。 您可以使用shrinkWrap: true, primary: false,或physics: const NeverScrollableScrollPhysics(),shrinkWrap: true,来解决此问题。

演示片段

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.end,
          mainAxisSize: MainAxisSize.min,
          children: [
            // From here I want the Widget to be Scollable based on the List declared before
            Expanded(
              child: SingleChildScrollView(
                child: Column(
                  // mainAxisSize: MainAxisSize.min,
                  children: [
                    ListView.builder(
                      itemCount: 53,
                      shrinkWrap: true,
                      primary: false,
                      // physics: const NeverScrollableScrollPhysics(),
                      itemBuilder: (context, index) => Text(
                        "    textEval[index] $index",
                        style: const TextStyle(
                          fontWeight: FontWeight.w500,
                          height: 2,
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
            // The Elements between these two comments I want to be in a scrollable child view
            const Text(
              "textEval[textEval.length - 2]",
              style: TextStyle(
                fontWeight: FontWeight.w500,
                height: 2,
              ),
            ),
            const Text(
              "mainText",
              style: TextStyle(
                fontWeight: FontWeight.w500,
                height: 2,
              ),
            ),
          ],
        ),
      ),
    );
  }