Flutter :- 有没有办法自定义列表构建器中每个Expansion Tile的输出?

问题描述 投票:0回答:1

目前,我有一个列表视图构建器,它构建了4个Expansion Tile。

每个 ExpansionTile 都有 x 数量的子瓷砖。

目前,我像这样显示子瓦片,但我得到的数据是重复的4个ExpansionTile中的每一个。

children: <Widget>[
         listTile[index],
         listTile[index],
         listTile[index],
         listTile[index],
]

我如何为所有4个扩展瓦片显示唯一的数据(例如,扩展瓦片1的子瓦片显示数据全部来自列表1,扩展瓦片2的子瓦片显示数据全部来自列表2,等等...)?

class MyDynamicListTile extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final tileTitles = [ 'DEFAULT CATEGORY', 'SELECT COLOR', 'ALERT TYPE', 'VIBRATION TYPES' ];
    final iconsList = [ Icons.line_style, Icons.color_lens, Icons.ring_volume, Icons.vibration];
    final subTiles1 = [ 'FIELD', 'FIELD', 'FIELD', 'FIELD', 'FIELD' ];
    List<Widget> listTile = getListTileWidget(subTiles1);


    return ListView.builder(
        itemCount: tileTitles.length,
        itemBuilder: (context, index) {
          return new ExpansionTile(
            leading: Icon(iconsList[index]),
            title: new Text(tileTitles[index],
                style: TextStyle(fontWeight: FontWeight.bold, fontSize: 12)),
            children: <Widget>[
              listTile[index],
              listTile[index],
              listTile[index],
              listTile[index],


              ],
          );
        });
  }


List<Widget> getListTileWidget(final subTiles) {
  List<Widget> list = new List<Widget>();
  for (var i = 0; i < subTiles.length; i++) {
    list.add(new ListTile(
        title: Text(subTiles[i],
            style: TextStyle(fontWeight: FontWeight.bold, fontSize: 12)
            )));
  }
  return list;
}

}
listview flutter tile
1个回答
0
投票

试试这种方式,你只需使用单个列表或pojo类列表来实现你的目标,请查看下面的解决方案吧

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

class HomeScreen extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _HomeScreen();
  }
}

class _HomeScreen extends State<HomeScreen> {

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Material(
      child: ListView.builder(
        itemCount: fields.length,
        itemBuilder: (context, i) {
          return new ExpansionTile(
            title: new Text(fields[i].title, style: new TextStyle(fontSize: 12.0, fontWeight: FontWeight.bold),),
            children: <Widget>[
              new Column(
                children: _buildExpandableContent(fields[i]),
              ),
            ],
          );
        },
      ),
    );
  }

  _buildExpandableContent(Fields fields) {
    List<Widget> columnContent = [];

    for (String content in fields.dataList)
      columnContent.add(
        new ListTile(
          title: new Text(content, style: new TextStyle(fontSize: 12.0,fontWeight: FontWeight.bold),),
          leading: new Icon(fields.icon),
        ),
      );

    return columnContent;
  }
}


class Fields {
  final String title;
  List<String> dataList = [];
  final IconData icon;

  Fields(this.title, this.dataList, this.icon);
}


List<Fields> fields = [
  new Fields(
    'DEFAULT CATEGORY',
    ['DEFAULT 1', 'DEFAULT 2', 'DEFAULT. 3', 'DEFAULT 4'],
    Icons.line_style,
  ),
  new Fields(
    'SELECT COLOR',
    ['COLOR. 1', 'COLOR 2', 'COLOR 3'],
    Icons.color_lens,
  ),
  new Fields(
    'ALERT TYPE',
    ['ALERT 1', 'ALERT 2', 'ALERT 3'],
    Icons.ring_volume,
  ),
  new Fields(
    'VIBRATION TYPES',
    ['VIBRATION 1', 'VIBRATION 2', 'VIBRATION 3'],
    Icons.vibration,
  ),
];

请查看下面的解决方案 enter image description here

© www.soinside.com 2019 - 2024. All rights reserved.