如何才能使图标仅针对所单击的磁贴进行更新?目前的行为是,当点击一个磁贴时,all个图标会更新.

以下是代码(调整为仅包括相关部分):

Column(children: List.generate(
    filteredFAQ.length,
    (index) => Column(
        children: [
            if(index > 0) {
                Container(
                    child: Column(
                        children: <Widget>[
                            ExpansionTile(
                            trailing: SvgPicture.string(
                                isQuestionClicked
                                    ? addPayeeArrowUp
                                    : rightArrow,
                                color: primary,
                              ),
                              onExpansionChanged:
                                  (bool expanded) {
                                setState(() {
                                  isQuestionClicked = expanded;
                                });
                              },
                            ),
                        ],
                    )
                )
            }
        ]
    )
),);

以下是该行为的截图:

beforeClickingOneTile

[afterClickingOneTile2

我使用了内置的ExpansionChange of the ExpansionTile.

推荐答案

要仅更改展开的磁贴的图标,可以使用以下方法:

创建一个Map:

Map<int, bool> state = {};

并相应地在您的ExpansionTile中使用它来判断它是否被选中,如果值是truefalse:

 List.generate(6, (index) {
          return ExpansionTile(
            title: Text('Item $index'),
            trailing: state[index] ?? false
                ? Icon(Icons.arrow_drop_up)
                : Icon(Icons.arrow_drop_down),
            onExpansionChanged: (value) {
              setState(() {
                state[index] = value;
              });
            },
            children: [
              Container(
                height: 100,
                color: Colors.red,
              ),
            ],
          );
        }),

完整的可运行示例:

import 'package:flutter/material.dart';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatefulWidget {
  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  Map<int, bool> state = {};

  bool isExpanded = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Demo Home Page'),
      ),
      body: Column(
        children:
            // generate 6 ExpansionTiles
            List.generate(6, (index) {
          return ExpansionTile(
            title: Text('Item $index'),
            trailing: state[index] ?? false
                ? Icon(Icons.arrow_drop_up)
                : Icon(Icons.arrow_drop_down),
            onExpansionChanged: (value) {
              setState(() {
                state[index] = value;
              });
            },
            children: [
              Container(
                height: 100,
                color: Colors.red,
              ),
            ],
          );
        }),
      ),
    );
  }
}

Flutter相关问答推荐

如何在Flutter 屏幕中添加箭头形状

Flutter:InteractiveViewer中可伸缩SVG背景上的定位小部件不对齐

如何防止alert 对话框在收到通知时出现在某个flutter页面中

Build.gradle专线:2个Flutter Flutter

在Android Studio的新用户界面中未找到热重新加载

Flutter -如何将导航轨道标签靠左对齐?

为什么Flutter 翼扩展卡有上下边框?

Flutter creating Constant.dart InputDecoration section put pass in hintText

如何在抖动中预加载一条路由,或者即使在屏幕外也保持加载小工具?

轻松本地化包翻译在底部导航栏项目标签Flutter 翼dart 中不起作用

火焰Flutter 在多个向量之间插补2

Flutter 火焰相机抖动已弃用

输入处于活动状态时如何设置文本字段标签的样式?

我想在一个屏幕上有两个相同区域的列表视图,我该如何设置?

我怎样才能一次只选中一个复选框?

如何限制用户每 24 小时执行的操作数?

Flutter - 使用 pin 进行身份验证

使用 hydrad_bloc 的预览包

参数类型Future>不能分配给参数类型Future>?

如何使用我拥有的 .jks 文件签署我的应用程序