listview - ListView中如何维护widget的状态?

我有一个可点击的小部件列表[即 MarkWidget],当点击小部件时,小部件的状态会发生变化。但是当列表滚动到底部并滚动回顶部时,所有小部件的状态都会重置为默认值。

如何停止/强制 flutter 在滚动后不重绘列表中的现有小部件?

例如: 如果我单击 ITEM 1,颜色会从绿色变为红色,但如果滚动到底部并滚动回顶部,则 ITEM 1 颜色会变回绿色。 如果在不考虑滚动的情况下单击它,我需要 ITEM 1 颜色为红色。

这里是代码:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
      theme: ThemeData(
        platform: TargetPlatform.android,
      ),
    );
  }
}

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  List<Widget> _widgetList = List.generate(
    30,
    (index) => MarkWidget(
          key: Key('ITEM $index'),
          title: 'ITEM $index',
        ),
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("My List"),
      ),
      body: ListView.builder(
        key: new Key("my_list"), //new

        itemBuilder: (BuildContext context, int index) {
          return _widgetList[index];
        },
        itemCount: _widgetList.length,
      ),
    );
  }
}

class MarkWidget extends StatefulWidget {
  final String title;

  const MarkWidget({Key key, this.title}) : super(key: key);

  @override
  _MarkWidgetState createState() => _MarkWidgetState();
}

class _MarkWidgetState extends State<MarkWidget> {
  bool _checked = false;

  @override
  Widget build(BuildContext context) {
    return FlatButton(
      onPressed: () {
        setState(() {
          _checked = !_checked;
        });
      },
      child: Container(
        padding: EdgeInsets.all(10.0),
        margin: EdgeInsets.all(10.0),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.all(
            Radius.circular(5.0),
          ),
          color: _checked ? Colors.red : Colors.green,
        ),
        child: Text(
          "${widget.title}",
          style: TextStyle(
            color: Colors.white,
            decoration: _checked ? TextDecoration.lineThrough : TextDecoration.none,
          ),
        ),
      ),
    );
  }
}

最佳答案

AutomaticKeepAliveClientMixin mixin 添加到 StatefulWidget(Item 小部件)的 State 中,覆盖 wantKeepAlive 方法并返回 true

     class _MarkWidgetState extends State<MarkWidget> with AutomaticKeepAliveClientMixin{
       ...

         
    @override
    Widget build(BuildContext context) {
      // call this method.
      super.build(context);
      ...
    }

     @override
       bool get wantKeepAlive => true;
     }

更多信息在这里:https://docs.flutter.io/flutter/widgets/AutomaticKeepAliveClientMixin-mixin.html

https://stackoverflow.com/questions/55699781/

相关文章:

dart - 如何在继续 flutter 之前等待 future 的对象?

dart - ListView.builder 在 flutter 中逐项滚动

dart - Flutter - 关闭小部件时 BLoC 流实例会导致内存泄漏吗?

dart - Flutter - 创建值和名称数组

firebase - 持久化用户身份验证 Flutter Firebase

flutter - 使用 FadeInImage Flutter 正确拟合图像

dart - 如何在 Flutter 中清除 AnimatedList 中的所有项目

flutter - Hummingbird(现在是 Flutter for web)计划发布。我应该

dart - Flutter - 在 BottomNavigationBar 中显示一个 Popup

android - Flutter 随机崩溃并删除 Flutter 文件