如何在颤动中将图标添加到列表视图构建器列表？

Question

这是一个非常基本的应用程序，可以在 tap.But 上突出显示选定的颜色我想要列表视图的前导图标。我怎样才能做到这一点？如果我在小部件中添加一个图标，那么到处都会呈现相同的图标。我想要每个列表的唯一图标。请帮忙。这是我的代码：

我想为每个列表渲染图标。

 void main() {
      runApp(MyApp());
    }
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Flutter Demo',
          theme: ThemeData(
            primarySwatch: Colors.blue,
          ),
          home: MyHomePage(title: 'Flutter Demo Home Page'),
        );
      }
    }
    
    class MyHomePage extends StatefulWidget {
      MyHomePage({Key key, this.title}) : super(key: key);
      final String title;
    
      @override
      _MyHomePageState createState() => _MyHomePageState();
    }
    
    class _MyHomePageState extends State<MyHomePage> {
      List<String> texts = ['ME', 'MYSELF', 'I'];
      List<bool> isHighlighted = [true, false, false];
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text('Demo App'),
          ),
          drawer: Drawer(
            child: Center(
              child: Column(children: <Widget>[
                Expanded(
                  child: ListView.builder(
                      itemCount: texts.length,
                      itemBuilder: (_, index) {
                        return GestureDetector(
                          onTap: () {
                            for (int i = 0; i < isHighlighted.length; i++) {
                              setState(() {
                                if (index == i) {
                                  isHighlighted[index] = true;
                                } else {
                                  //the condition to change the highlighted item
                                  isHighlighted[i] = false;
                                }
                              });
                            }
                          },
                          child: Container(
                            color: isHighlighted[index]
                                ? Colors.blueAccent
                                : Colors.white,
                            child: ListTile(
                              //i want to display different items for each list in the leading property.
    
                              title: Text(texts[index]),
                            ),
                          ),
                        );
                      }),
                ),
                Container(
                  child: Text(
                    'this is footer',
                    style: TextStyle(fontSize: 20),
                  ),
                )
              ]),
            ),
          ),
        );
      }
    }

Answer 1

由于您的列表中只有上面 2 个列表定义的 3 个项目，如果您想要一个图标用于这些列表中的每个条目，那么您应该定义另一个包含这些图标的列表，并且根据您所在的索引渲染它们。

// (..)
List<String> texts = ['ME', 'MYSELF', 'I'];
List<bool> isHighlighted = [true, false, false];

// add the icons you want to render for each entry here
List<IconData> icons = [Icons.person, Icons.home, Icons.notifications];

// add screens here or use the approach marked as answer above
List<Widget> screens = [PageOne(), PageTwo(), PageThree()];

然后在您的列表图块中，您可以根据索引获取图标

// (...)
child: Container(
         color: isHighlighted[index]
                ? Colors.blueAccent
                  : Colors.white,
         child: ListTile(
           //i want to display different items for each list in the leading property.
           leading: Icon(icons[index]),
           title: Text(texts[index]),
           onTap: () =>  Navigator.push(
    context,
    MaterialPageRoute(builder: (context) => screens[index]),
  )
           ),
      ),

Answer 2

试试这个

class _MyHomePageState extends State<MyHomePage> {
  List<ListItem> _items = [
    ListItem(title: 'Me', isSelected: true, icon: Icons.home),
    ListItem(title: 'MYSELF', isSelected: false, icon: Icons.cake),
    ListItem(title: 'I', isSelected: false, icon: Icons.camera),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Demo App'),
      ),
      drawer: Drawer(
        child: Center(
          child: Column(children: <Widget>[
            Expanded(
              child: ListView.builder(
                  itemCount: _items.length,
                  itemBuilder: (_, index) {
                    return GestureDetector(
                      onTap: () {
                        for (int i = 0; i < _items.length; i++) {
                          setState(() {
                            if (index == i) {
                              _items[index].isSelected = true;
                            } else {
                              //the condition to change the highlighted item
                              _items[i].isSelected = false;
                            }
                          });
                        }
                      },
                      child: Container(
                        color: _items[index].isSelected
                            ? Colors.blueAccent
                            : Colors.white,
                        child: ListTile(
                          //i want to display different items for each list in the leading property.
                          leading: Icon(_items[index].icon),
                          title: Text(_items[index].title),
                        ),
                      ),
                    );
                  }),
            ),
            Container(
              child: Text(
                'this is footer',
                style: TextStyle(fontSize: 20),
              ),
            )
          ]),
        ),
      ),
    );
  }
}

class ListItem {
  String title;
  bool isSelected;
  IconData icon;
  ListItem({
    this.title,
    this.isSelected,
    this.icon,
  });
}

我为每个项目制作了一个单独的 class，而不是或有多个列表。

如何在颤动中将图标添加到列表视图构建器列表？

How to add icons to the List View Builder list in flutter?

flutter

dart

flutter-layout

dart-pub

flutter-listview