[英]How to Change background color of ListTile upon selection in Flutter
import 'package:JAPANESE/data/hiraganaall.dart';
import 'package:flutter/material.dart';
class HiraganaPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(
"Hiragana",
style: TextStyle(
color: Colors.white,
),
),
centerTitle: true,
backgroundColor: Colors.blueAccent,
),
body: ListView.separated(
separatorBuilder: (context, index) {
return Divider(
thickness: 3.0,
height: 1.0,
);
},
itemCount: data.length,
itemBuilder: (context, index) {
return Container(
decoration: BoxDecoration(color: Colors.grey[300]),
child: ListTile(
leading: CircleAvatar(
backgroundColor: Colors.white,
radius: 28,
child: Image.network(
data[index]["writing"],
),
),
title: Text(
"Text: " + data[index]["key"],
style: TextStyle(
fontFamily: "Merienda",
fontSize: 18.22,
),
),
subtitle: Text(
"Reading: " + data[index]["reading"],
style: TextStyle(
fontFamily: "Merienda",
fontSize: 18.22,
),
),
),
);
},
),
);
}
}
I've made a ListView in Flutter, but now I have some ListTiles in this ListView that can be selected.我在Flutter中做了一个ListView,但是现在这个ListView中有一些ListTiles可以选择。 Upon selection, I want the background color to change to a color of my choice.选择后,我希望背景颜色更改为我选择的颜色。 I don't know how to do that.我不知道该怎么做。 In the docs they mention that a ListTile has a property style.在文档中,他们提到 ListTile 具有属性样式。 However, when I try to add that (as in third last line in the code below), this style property gets a squiggly red line underneath and the compiler tells me that The named parameter 'style' isn't defined.但是,当我尝试添加它时(如下面代码中的倒数第三行),该样式属性在下方出现一条波浪状的红线,编译器告诉我未定义命名参数“样式”。
You can just wrap the ListTile with a container and change it's color.您可以用容器包装 ListTile 并更改它的颜色。 Here's an example with that code and with a method to change the color:这是该代码的示例以及更改颜色的方法:
class Issue66349460 extends StatefulWidget {
@override
_Issue66349460State createState() => _Issue66349460State();
}
class _Issue66349460State extends State<Issue66349460> {
List<Item> items = [
Item(title: 'Item 1', color: Colors.red),
Item(title: 'Item 2', color: Colors.blue),
Item(title: 'Item 3', color: Colors.green),
];
@override
Widget build(BuildContext context) {
return ListView.builder(
itemCount: items.length,
itemBuilder: (context, index) {
return Container(
color: items[index].color,
child: ListTile(
title: Text(items[index].title),
onTap: () => changeListTileColor(items[index]),
),
);
}
);
}
void changeListTileColor(Item item){
setState(() {
item.color = Colors.deepPurple;
});
}
}
class Item {
String title;
Color color;
Item({@required this.title, this.color});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.