如何使用 itemBuilder 选择最后点击的 ListTile 小部件？

Question

我正在尝试在 Drawer 内将最后点击的 ListTile 小部件的 selected 属性更改为 true（然后显然其他 ListTiles 的 selected 属性为 false），但我不明白如何使用 itemBuilder（提到在官方颤振文档中）为此。 我尝试将我的 ListTiles 放入 AnimatedListItemBuilder 小部件中，但这对我不起作用。

Widget _buildDrawer() {
    return ListView(
          // Important: Remove any padding from the ListView.
          padding: EdgeInsets.zero,
          children: <Widget>[
            DrawerHeader(
              child:
                Wrap(
                  alignment: WrapAlignment.center,
                  direction: Axis.vertical,
                  children: <Widget>[
                    Text(
                      _currentUser.displayName, 
                      style: TextStyle(
                        fontSize: 20,
                        color: Colors.white
                      ),  
                    ),
                    Wrap(
                      direction: Axis.vertical,
                      children: <Widget>[
                        Text(
                        "Iskolai kategória: A", 
                          style: TextStyle(
                            fontSize: 18,
                            color: Colors.white70
                          ),  
                        ),
                        Text(
                          "Kollégiumi kategória: A", 
                          style: TextStyle(
                            fontSize: 18,
                            color: Colors.white70
                          ),  
                        ),
                      ],
                    )
                  ],
                ),
              decoration: BoxDecoration(
                color: Colors.blue,
              ),
            ),
            ListTile(
              selected: true,
              leading: Icon(Icons.date_range_rounded),
              title: Text('Stúdium jelentkezés'),
              onTap: () {
              // Update the state of the app.
              // ...
              // Then close the drawer.
              Navigator.pop(context);
            },
            ),
            ListTile(
              leading: Icon(Icons.article_rounded),
              title: Text('Koleszhírek'),
              onTap: () {
                // Update the state of the app.
                // ...
                Navigator.pop(context);
              },
            ),
            ListTile(
              leading: Icon(Icons.account_box_rounded),
              title: Text('Profil'),
              onTap: () {
                // Update the state of the app.
                // ...
               Navigator.pop(context);
              },
            ),
            ListTile(
              leading: Icon(Icons.logout),
              title: Text('Kijelentkezés'),
              onTap: () => {
                _googleSignIn.disconnect(),
                Navigator.pop(context)
              },
            ),
          ],
        );
  }

Answer 1

您必须将“选定索引”保存在变量中并检查当前索引是否等于选定索引以突出显示 ListView。我已更新您的代码以使其正常工作。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}


class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      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> {
  int _selectedIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      drawer: _buildDrawer(context),
      body: Center(
        child: Text("DrawerHeader Demo"),
      ),
    );
  }

  Widget _buildDrawer(BuildContext context) {
    List<Widget> leading = [
      Icon(Icons.date_range_rounded),
      Icon(Icons.article_rounded),
      Icon(Icons.account_box_rounded),
      Icon(Icons.logout),
    ];
    List<Widget> title = [
      Text('Stúdium jelentkezés'),
      Text('Koleszhírek'),
      Text('Profil'),
      Text('Kijelentkezés'),
    ];

    return Container(
      color: Colors.white,
      child: ListView(
        padding: EdgeInsets.zero,
        children: <Widget>[
          DrawerHeader(
            child: Wrap(
              alignment: WrapAlignment.center,
              direction: Axis.vertical,
              children: <Widget>[
                Text(
                  "A",
                  style: TextStyle(fontSize: 20, color: Colors.white),
                ),
                Wrap(
                  direction: Axis.vertical,
                  children: <Widget>[
                    Text(
                      "Iskolai kategória: A",
                      style: TextStyle(fontSize: 18, color: Colors.white70),
                    ),
                    Text(
                      "Kollégiumi kategória: A",
                      style: TextStyle(fontSize: 18, color: Colors.white70),
                    ),
                  ],
                )
              ],
            ),
            decoration: BoxDecoration(
              color: Colors.blue,
            ),
          ),
          ListView.builder(
            itemCount: 4,
            shrinkWrap: true,
            itemBuilder: (BuildContext context, int index) {
              return ListTile(
                title: title[index],
                leading: leading[index],
                selected: index == _selectedIndex,
                onTap: () {
                  setState(() {
                    _selectedIndex = index;
                    Navigator.pop(context);
                  });
                },
              );
            },
          ),
        ],
      ),
    );
  }
}