时间戳

首页 > 解决方案 > Flutter 不支持的操作：在复合列表布局上添加

flutter - Flutter 不支持的操作：在复合列表布局上添加

问题描述

我想要一个由FilterChip 和（垂直）ListView 组成的屏幕。FilterChip 列表必须由页面上的主列表（第二个小部件）的对象属性组成。这是我的代码：

     class _ListFilmResultsWidgetState extends State<ListFilmResultsWidget> {
    
      Wrap filters = Wrap(direction: Axis.horizontal);
    
      @override
      Widget build(BuildContext context) {
        return FutureBuilder(
            builder: (context, projectSnap) {
              switch(projectSnap.connectionState) {
                case ConnectionState.waiting:
              return const Center(child: CircularProgressIndicator());

            case ConnectionState.done:
              if(projectSnap.hasData){
                List<Film>? listFilms = projectSnap.data as List<Film>?;
                return
                  ListView(children: [
                    filters,
                    ListView.builder(
                      itemCount: listFilms!.length,
                      scrollDirection: Axis.vertical,
                      shrinkWrap: true,
                      itemBuilder: (context, index) {
                        Film item = listFilms[index];
                        addFilters(item.genres);
                       
                        return Card(
                            child: Center(
                              child: ListTile(
                                title: Text('${item.title} (${item.releaseYear})'),
                                subtitle: Text(item.plot!),
                              ),
                            )
                          );
                      }
                      )
                    ]);
              }

          }
          return Container();
        },
        future: _getFilmsDetails(context)
    );
  }


      void addFilters(List<Genre> genres){
        for(int i=0; i<genres.length; i++){
          setState(() {
            filters.children.add(FilterChip
              (label: Text(genres[i].name),
                key: Key("${genres[i].id}"),
                onSelected: (value) => {},
                selected: true));
          });
        }
    
      }

因此，正如您所看到的，当我获得一个项目（ Film item = listFilms[index]; ）时，我调用方法 addFilters 以从中获取流派列表并将她添加到过滤器（FilterChip 的包装）。问题是我收到错误“不支持的操作：添加”，我猜这是因为放置包装和列表的 ListView 是无状态小部件。我怎么能解决这个问题？有什么方法可以将项目添加到 Wrap 中吗？

标签： flutterflutter-layout

解决方案

Flutter 中的 Widget 是不可变的，这意味着一旦创建了 Widget，就无法修改其参数。

您可以创建一个包含列表FilterChip或其他数据的变量，然后在方法中创建Wrap小部件。build

例如：

class _DemoState extends State<Demo> {
  final labels = ['A', 'B', 'C'];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Wrap(
          children: [
            for (final label in labels)
              FilterChip(
                label: Text(label),
                onSelected: (_) {
                  // Add a new `FilterChip` once clicked
                  setState(() => labels.add('D'));
                },
              ),
          ],
        ),
      ),
    );
  }
}

推荐阅读