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

gdrx4gfi 于 2022-11-20 发布在 Android

关注(0)|答案(4)|浏览(149)

我正在建立一个计算器应用程序，其中我想要一个滚动的孩子为以前的计算，但因为我已经使用列列出不同的小部件它的显示我有一种错误。
下面是设计的一部分的图像，其中选定了我希望可滚动的区域

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

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,
                ),
              ),
            ],
          ),
        )
      ],
    ),
  ),

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

android

来源：https://stackoverflow.com/questions/70823932/flutter-making-scrollable-child-inside-a-column-with-list-view-builder

4条答案

按热度按时间

bvjxkvbb1#

使用SingleChildScrollView（） Package 数据行。

赞(0）回复(0）举报 2022-11-20

rbl8hiat2#

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

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

因为SingleChildScrollView可以采用无限高度，而Column可以允许无限高度，所以它不会起作用。
最简单的方法是用扩展的小部件 Package SingleChildScrollView

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

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

赞(0）回复(0）举报 2022-11-20

wqlqzqxt3#

您可以通过删除Column等额外的小部件来简化结构。
用Expanded Package 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,
              ),
            ),
          ],
        ),
      ),
    );
  }

赞(0）回复(0）举报 2022-11-20

qojgxg4l4#

只需使用SizedBox Package Listviev.builder并给予其高度和宽度

赞(0）回复(0）举报 2022-11-20