Flutter：如何记住并突出显示选定的抽屉项目？

Question

有没有办法通过使用 ListView 来记住和突出显示选定的 Drawer 项？ 我在java navigationView.setItemBackgroundResource(R.drawable.colorselect); 中使用了这段代码，但是我不知道如何在flutter中做到这一点！

我尝试了一些方法但不起作用，当我选择一个项目时，所有其他项目的背景都改变了！

这是我的代码的样子

class AboutApp extends StatefulWidget {
  @override
  _AboutAppState createState() => _AboutAppState();
}

class _AboutAppState extends State<AboutApp> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Demo App'),
      ),
      drawer: Drawer(
        child: Center(
          child: Column(children: <Widget>[
            Expanded(
              child: ListView(
                shrinkWrap: true,
                children: [
                  Container(
                    child: Text(
                      'Part1',
                      style: TextStyle(fontSize: 20),
                    ),
                    color: Colors.blue,
                    height: 30,
                  ),
                  ListTile(
                    onTap: () {},
                    title: Text('Item Part1'),
                  ),

                  ListTile(
                    onTap: () {},
                    title: Text('Item Part1'),
                  ),

                  Container(
                    child: Text(
                      'Part2',
                      style: TextStyle(fontSize: 20),
                    ),
                    color: Colors.blue,
                    height: 30,
                  ),
                  ListTile(
                    onTap: () {},
                    title: Text('Item Part2'),
                  ),
                  ListTile(
                    onTap: () {},
                    title: Text('Item Part2'),
                  ),

                ],
              ),
            ),
            Container(
              child: Text(
                'this is footer',
                style: TextStyle(fontSize: 20),
              ),
            )
          ]),
        ),
      ),
    );
  }
} 

.................................................. ............ ..................................................... ………… ..................................................... ........

Answer 1

下面是一个例子：

List<String> texts = ['first', 'second', 'third'];

List<bool> isHighlighted = [true, false, false];     //here the list where you can change the highlighted item

@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.red : Colors.white,
                  child: ListTile(                                     //the item
                    title: Text(texts[index]),
                  ),
                ),
              );
            }),
          ),
          Container(
            child: Text(
              'this is footer',
              style: TextStyle(fontSize: 20),
            ),
          )
        ]),
      ),
    ),
  );
}

Answer 2

试试这个，我喜欢它的工作原理。

class DrawerWidget extends StatefulWidget{

  DrawerWidget({Key key,@required this.userName,@required this.url,@required this.isUser}) : super(key: key);
  final String userName;
  final String url;
  final bool isUser;
  // final List<bool> isHighlighted = [true, false, false];
  final List<dynamic> menuList = menus;

  _DrawerWidget createState() => _DrawerWidget();
}

class _DrawerWidget extends State<DrawerWidget>{


 @override
  void initState() {
    
    super.initState();
    
  }

  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;
    setState(() {
      for(int i = 0; i < widget.menuList.length; i++ ){
      if (ModalRoute.of(context).settings.name == widget.menuList[i]['route']) {
        widget.menuList[i]['active'] = true;
      } else widget.menuList[i]['active'] = false;
    }
    });
    return Drawer(
      child: Container(
        constraints: BoxConstraints.expand(),
        child: Column(
          children: [
            Container(
              padding: EdgeInsets.fromLTRB(5, 10, 5, 10),
              alignment: Alignment.topLeft,
              height: size.height*0.25,
              width: double.infinity,
              color: Colors.white,
              child: Column(
                children: [
                  widget.isUser ?
                  Row(mainAxisAlignment: MainAxisAlignment.spaceAround, crossAxisAlignment: CrossAxisAlignment.center, children: [ 
                    TextWidget(text: widget.userName, font: 'Poppins-SemiBold', fontSize: 14, color: Colors.black,),
                    ClipRRect(
                      borderRadius: BorderRadius.circular(50),
                      child: CachedNetworkImage(
                        width: 50,
                        height: 50,
                        fit: BoxFit.fill,
                        imageUrl: widget.url,
                        progressIndicatorBuilder: (context, url, downloadProgress) => 
                          CircularProgressIndicator(value: downloadProgress.progress),
                        errorWidget: (context, url, error) => Icon(Icons.error),

                      ),
                    ) 
                    ],
                  ): FlatButton(onPressed: null, child: TextWidget(text: 'Login', font: 'Poppins-SemiBold', fontSize: 14, color: Colors.black)),
                  
                      Container(
                        margin: EdgeInsets.fromLTRB(10, 20, 10, 0),
                        alignment: Alignment.center,
                        width: double.infinity,
                        child: FlatButton(
                          
                          shape: RoundedRectangleBorder(
                            
                            borderRadius: BorderRadius.circular(10.0),
                            side: BorderSide(color: darkBlueColor)
                          ),
                          child: TextWidget(text: 'LIVE CHAT', color: Colors.white, font: 'Poppins-Bold', fontSize: 14),
                          color: darkBlueColor,
                          onPressed: () {/** */},
                        ),
                      ),
                    
                ]
              ),
            ),
            Expanded(
              child: ListView.builder(         
              itemCount: widget.menuList.length,
              shrinkWrap: true,
                itemBuilder: (BuildContext context, int index){
                  return GestureDetector(
                    onTap: (){
                      // for(int i = 0; i < widget.menuList.length; i++){
                        Navigator.pop(context);
                        Navigator.pushNamed(context, widget.menuList[index]['route']);
                        
                      // }
                    },
                    child: Container(
                      color: widget.menuList[index]['active'] ? darkBlueColor : Colors.white,
                      child: ListTile(                                     //the item
                        title: TextWidget(color: widget.menuList[index]['active'] ? Colors.white : Colors.black, text: widget.menuList[index]['name'], font: 'Poppins-Medium', fontSize: 14,),
                      ),
                    ),
                  );
                }
              ),
            ),
                
              
            
          ]
        ),
      )
    );
  }
}


var menus = [
    {
      'name' : 'Home',
      'icon' : Icons.home,
      'route' : '/',
      'active' : false,
    },
    {
      'name' : 'Shopping',
      'icon' : Icons.shop,
      'route' : '/shopping',
      'active' : false,
    },
    {
      'name' : 'Booking',
      'icon' : Icons.bookmark,
      'route' : '/booking',
      'active' : false,
    },
    {
      'name' : 'Media',
      'icon' : Icons.play_circle_filled,
      'route' : '/media',
      'active' : false,
    },
    {
      'name' : 'Learning',
      'icon' : Icons.account_box,
      'route' : '/learning',
      'active' : false,
    },
    {
      'name' : 'News',
      'icon' : Icons.new_releases,
      'route' : '/news',
      'active' : false,
    },
  ];