我已经ListView在 Flutter 中做了一个，但现在我有一些ListTiles可以ListView选择。选择后，我希望背景颜色更改为我选择的颜色。我不知道该怎么做。在文档中，他们提到 aListTile有一个 property style。但是，当我尝试添加它时（如下面代码中的倒数第三行），这个style属性在下面会出现一条弯曲的红线，编译器会告诉我The named parameter 'style' isn't defined.
Widget _buildRow(String string){
return new ListTile(
title: new Text(string),
onTap: () => setState(() => toggleSelection(string)),
selected: selectedFriends.contains(string),
style: new ListTileTheme(selectedColor: Colors.white,),
);
}
我能够使用Container内的BoxDecoration更改 ListTile 的背景颜色：
ListView (
children: <Widget>[
new Container (
decoration: new BoxDecoration (
color: Colors.red
),
child: new ListTile (
leading: const Icon(Icons.euro_symbol),
title: Text('250,00')
)
)
]
)
ListTile(
tileColor: isSelected ? Colors.blue : null,
)
// You can also use `Map` but for the sake of simplicity I'm using two separate `List`.
final List<int> _list = List.generate(20, (i) => i);
final List<bool> _selected = List.generate(20, (i) => false); // Fill it with false initially
Widget build(BuildContext context) {
return Scaffold(
body: ListView.builder(
itemBuilder: (_, i) {
return ListTile(
tileColor: _selected[i] ? Colors.blue : null, // If current item is selected show blue color
title: Text('Item ${_list[i]}'),
onTap: () => setState(() => _selected[i] = !_selected[i]), // Reverse bool value
);
},
),
);
}
如果您还需要onTap具有涟漪效果的侦听器，则可以使用Ink：
ListView(
children: [
Ink(
color: Colors.lightGreen,
child: ListTile(
title: Text('With lightGreen background'),
onTap() { },
),
),
],
);
不是ListTile那个style有财产。但是ListTileTheme。
ListTileTheme是一个继承的Widget。和其他人一样，它用于传递数据（例如这里的主题）。
要使用它，您必须在 ListTile 上方使用包含ListTileTheme所需值的任何小部件包装。
ListTile然后将根据最近的ListTileTheme实例设置主题。
包裹ListTile在一个Ink.
Ink(
color: isSelected ? Colors.blue : Colors.transparent,
child: ListTile(title: Text('hello')),
)
一种简单的方法是将初始索引存储在一个变量中，然后在点击时更改该变量的状态。
ListView.builder(
shrinkWrap: true,
itemCount: 4,
itemBuilder: (context, index) {
return Container( //I have used container for this example. [not mandatory]
color: tappedIndex == index ? Colors.blue : Colors.grey,
child: ListTile(
title: Center(
child: Text('${index + 1}'),
),onTap:(){
setState((){
tappedIndex=index;
});
}));
})
完整代码：
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: MyWidget(),
);
}
}
class MyWidget extends StatefulWidget {
@override
MyWidgetState createState() => MyWidgetState();
}
class MyWidgetState extends State<MyWidget> {
late int tappedIndex;
@override
void initState() {
super.initState();
tappedIndex = 0;
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
ListView.builder(
shrinkWrap: true,
itemCount: 4,
itemBuilder: (context, index) {
return Container(
color: tappedIndex == index ? Colors.blue : Colors.grey,
child: ListTile(
title: Center(
child: Text('${index + 1}'),
),onTap:(){
setState((){
tappedIndex=index;
});
}));
})
]));
}
}
我知道原始问题已得到解答，但我想添加如何设置ListTile按下瓷砖时的颜色。您正在寻找的属性被调用highlight color，它可以通过将 包装ListTile在一个Theme小部件中来设置，如下所示：
Theme(
data: ThemeData(
highlightColor: Colors.red,
),
child: ListTile(...),
)
);
注意：如果Theme小部件重置了 中文本元素的字体ListTile，只需将其fontFamily属性设置为您在应用程序中其他地方使用的相同值。
不幸的是， ListTile 没有 background-color 属性。因此，我们必须简单地将 ListTile 小部件包装到 Container/Card 小部件中，然后我们可以使用它的颜色属性。此外，我们必须提供具有一定高度的 SizedBox 小部件来分隔相同颜色的 ListTiles。
我正在分享对我有用的东西:)
我希望它肯定会帮助你。
截图：看看它是如何工作的
return
ListView(
children: snapshot.data.documents.map((doc) {
return Column(children: [
Card(
color: Colors.grey[200],
child: ListTile(
leading: Icon(Icons.person),
title: Text(doc.data['coursename'], style: TextStyle(fontSize: 22),),
subtitle: Text('Price: ${doc.data['price']}'),
trailing: IconButton(
icon: Icon(Icons.delete),
onPressed: () async {
await Firestore.instance
.collection('courselist')
.document(doc.documentID)
.delete();
},
),
),
),
SizedBox(height: 2,)
],);
}).toList(),[enter image description here][1]
);
我用过
ListTile(
title: Text('Receipts'),
leading: Icon(Icons.point_of_sale),
tileColor: Colors.blue,
),
有两个道具：tileColor 和 selectedTileColor。
tileColor- 当瓷砖/行未被选中时；
selectedTileColor- when the tile/row is selected
ListTile(
selected: _isSelected,
tileColor: Colors.blue,
selectedTileColor: Colors.greenAccent,
)
我可以通过将 ListTile 设为 Container Widget 的子级并向 Container Widget 添加颜色来更改其背景颜色。
这里的drawerItem 是保存isSelected 值的模型类。背景颜色取决于 isSelected 值。
注意：对于未选中的项目，请保持颜色透明，这样您仍然可以获得涟漪效果。
for (var i = 0; i < drawerItems.length; i++) {
var drawerItem = drawerItems[i];
drawerOptions.add(new Container(
color: drawerItem.isSelected
? Colors.orangeAccent
: Colors.transparent,
child: new ListTile(
title: new Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[Text(drawerItem.title), drawerItem.count],
),
leading: SvgPicture.asset(
drawerItem.icon,
width: 34,
height: 34,
),
onTap: () {
_handleNavigation(i);
},
selected: drawerItem.isSelected,
),
));
}
您的答案已在Github中得到解答。
Card(
color: Colors.white,
shape: ContinuousRectangleBorder(
borderRadius: BorderRadius.zero,
),
borderOnForeground: true,
elevation: 0,
margin: EdgeInsets.fromLTRB(0,0,0,0),
child: ListTile(
// ...
),
)
在此处输入图像描述>使变量
int slectedIndex;
随叫随到
onTap:(){
setState(() {
selectedIndex=index;
})
瓷砖属性
color:selectedIndex==index?Colors.red :Colors.white,
与列表视图生成器相同
ListView.builder(
itemCount: 10,
scrollDirection:Axis.vertical,
itemBuilder: (context,index)=>GestureDetector(
onTap:(){
setState(() {
selectedIndex=index;
});
} ,
child: Container(
margin: EdgeInsets.all(8),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5),
color:selectedIndex==index?Colors.red :Colors.white,
),)