如何添加图标到列表视图生成器列表在flutter？

s8vozzvw 于 2023-05-29 发布在 Flutter

关注(0)|答案(3)|浏览(143)

这是一个非常基本的应用程序，突出显示选定的颜色。但我想领导图标的列表视图。我如何才能做到这一点？如果我在一个小部件中添加一个图标，相同的图标将在所有地方呈现。我想为每个列表独特的图标。请帮帮我下面是我的代码：
我想呈现每个列表的图标。

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

flutter

来源：https://stackoverflow.com/questions/67227480/how-to-add-icons-to-the-list-view-builder-list-in-flutter

3条答案

按热度按时间

pu3pd22g1#

因为你有一个列表，其中只有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]),
  )
           ),
      ),

赞(0）回复(0）举报 2023-05-29

i5desfxk2#

试试这个

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

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

赞(0）回复(0）举报 2023-05-29

tjrkku2a3#

只要在Map或List中给予所需的类型，无论您创建了什么。

Map<IconData, String> secondSelection = {
  Icons.notification_important: 'Notifications',
  Icons.phone_android_rounded: 'Devices',
  Icons.key: 'Passwords',
  Icons.message: 'Language',
};

赞(0）回复(0）举报 2023-05-29

我来回答

如何添加图标到列表视图生成器列表在flutter？

3条答案

相关问题

热门标签

最新问答