是否有任何方法可以使用ListView记住并突出显示选定的Drawer项目?
我在Java navigationView.setItemBackgroundResource(R.drawable.colorselect);
中使用了此代码,但是我不知道该如何处理!
我尝试了某种方法,但不起作用,当我选择一项时,所有其他项的背景都改变了!
这是我的代码
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),
),
)
]),
),
),
);
}
}
............................................... ...... ................................................... ...... ................................................... ........
答案 0 :(得分:0)
以下是您如何执行此操作的示例:
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),
),
)
]),
),
),
);
}
答案 1 :(得分:0)
尝试一下,我喜欢它的工作方式。
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,
},
];