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

【问题标题】：flutter/ The last widget disappears when you use Align in the itemBuilder in listviewflutter/ 当你在listview的itemBuilder中使用Align时，最后一个小部件消失了
【发布时间】：2022-08-12 19:40:45
【问题描述】：

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

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

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

image。

 @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),
                ),
              ),
            );
          },
        ),
      ),
    );
  }

共享工作代码，以便我们可以在 darrtpad 上对其进行测试

标签： flutter

【解决方案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

【讨论】：

在有人投反对票之前请删除。你完全误解了OP的问题。问题不在于缺少项目索引项目，而在于您滚动最后一个滚动元素时可见和不可见。