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

滚动后,如何停止/强制Flutter 以不重新绘制列表中的现有小部件?

例如: 如果我点击Item 1 is colored颜色 从绿色变为红色,但是如果滚动到底部并回滚到顶部,Item 1的 colored颜色 就会变回绿色. 我需要项目1的 colored颜色 是红色的,如果它被点击,而不是滚动.

DEMO

以下是代码:

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中的State(条目小部件),覆盖wantKeepAlive方法并返回true.

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

   @override
   bool get wantKeepAlive => true;
  }

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

Flutter相关问答推荐

Flutter:带有表单的SpeechToTextprovider

Flutter bloc -如何使用BlocBuilder?

ShaderMask上的文本渐变问题

Build.gradle专线:2个Flutter Flutter

在Flutter 中创建自定义Snackbar类

将列表<;Events>;从Flutter 应用程序中的函数传回EventLoader属性时出错

无法将新文物与Flutter 项目集成在一起

如何将带有参数的函数传递给FIFTH中的自定义小部件

尽管 onCollision 处理了我的角色还是从平台上掉了下来

Dart:未捕获错误:RangeError(索引):索引超出范围:索引应小于 7:7

hooks_riverpod 有用途吗

Flutter url_launcher 插件抛出java.lang.IllegalArgumentException:接收器未注册:io.flutter.plugins.urllauncher.WebViewActivity

如何在 flutter 中使用带有有效负载数据的重定向来执行 firebase 推送通知.?

当项目较少时收缩列表视图

如何显示从 MariaDB 获取的数据到列表视图

Firebase 中的查询限制 - .orderBy() 错误

如何在 SingleChildScrollView 小部件中管理自定义小部件状态

在 flutter 中使用 StreamBuilder 在文本字段中键入时显示过滤记录

我收到这个错误我无法解决

Firebase Firestore 查询