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

Posted 2023-02-23

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

【英文标题】：How to add icons to the List View Builder list in flutter?

【发布时间】：2021-07-17 12:22:36

【问题描述】：

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

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

 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),
                  ),
                )
              ]),
            ),
          ),
        );
      
    

【问题讨论】：

请标记您的编程语言

完成。谢谢。

【参考方案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]),
  )
           ),
      ),

【讨论】：

谢谢。有效。你能帮我路由吗？我的意思是如果用户点击一个特定的，它应该将他们重定向到那个屏幕。我是新来的，因此我很难弄清楚这一点。谢谢。

您可能应该适应@Mr Random 对使用模型类的回答，这是一种更好的方法

感谢您的帮助。这意味着很多。

【参考方案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,
  );

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

【讨论】：

谢谢。有效。你能帮我路由吗？我的意思是，如果用户单击特定的列表磁贴，它应该将它们重定向到该屏幕。我是新来的，因此我很难弄清楚这一点。谢谢。

flutter.dev/docs/cookbook/navigation/navigation-basics你可以参考这个