如何在 Flutter 中将图标添加到 List View Builder 列表中？

Question

这是一个非常基本的应用程序，它在点击时突出显示选定的颜色。但我希望将图标引导到列表视图。我怎样才能做到这一点？如果我在小部件中添加一个图标，则相同的图标会在任何地方呈现。我想要每个列表的唯一图标。请帮忙。这是我的代码：

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

 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

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

// (..)
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,
  });
}

我为每个项目创建了一个单独的类，而不是多个列表。