flutter/ 当你在listview的itemBuilder中使用Align时，最后一个小部件消失了

Question

我在 [Align] 小部件中使用了 [HeightFactor] 选项。

每次滚动时，底部小部件都会消失并出现。 我该怎么做？

我在 listview 中尝试了 [cacheExtent]，但我认为这是不对的。

图像。

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Container(
        child: ListView.builder(
          padding: const EdgeInsets.only(top: 50),
          itemCount: _color.length,
          itemBuilder: (BuildContext context, int index) {
            return Align(
              heightFactor: 0.6,
              child: Container(
                decoration: BoxDecoration(
                    color: _color[index],
                    borderRadius: BorderRadius.all(Radius.circular(20))),
                alignment: Alignment.center,
                padding: const EdgeInsets.all(30),
                child: Text(
                  'ITEM $index',
                  style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
                ),
              ),
            );
          },
        ),
      ),
    );
  }

Answer 1

请删除容器并替换为脚手架主体中的 SingleChildScrollView 并添加

shrinkWrap: true,
physics: ClampingScrollPhysics(),

在列表视图内

这是我的代码

List<Color> _colors = [
    Colors.blue,
    Colors.grey,
    Colors.redAccent,
    Colors.pink,
    Colors.orange,
    Colors.red,
    Colors.amber,
    Colors.blue,
    Colors.blue,
    Colors.grey,
    Colors.redAccent,
    Colors.pink,
    Colors.orange,
    Colors.red,
    Colors.amber,
    Colors.green,
    Colors.blue,
    Colors.grey,
    Colors.redAccent,
    Colors.pink,
    Colors.orange,
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: SingleChildScrollView(
        child: ListView.builder(
          shrinkWrap: true,
          physics: ClampingScrollPhysics(),
          padding: const EdgeInsets.only(top: 50),
          itemCount: _colors.length,
          itemBuilder: (BuildContext context, int index) {
            return Align(
              heightFactor: 0.6,
              child: Container(
                decoration: BoxDecoration(
                    color: _colors[index],
                    borderRadius: BorderRadius.all(Radius.circular(20))),
                alignment: Alignment.center,
                padding: const EdgeInsets.all(30),
                child: Text(
                  'ITEM ${index}',
                  style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
                ),
              ),
            );
          },
        ),
      ),
    );

它会工作，请检查输出

https://ibb.co/z25rBvf