Ändern Sie die Hintergrundfarbe von ListTile nach der Auswahl in Flutter
Ich habe eine ListView in Flutter erstellt, aber jetzt habe ich einige ListTiles in dieser ListView, die ausgewählt werden kann. Nach der Auswahl möchte ich, dass die Hintergrundfarbe in eine Farbe meiner Wahl geändert wird. Ich weiß nicht, wie ich das machen soll ... In den docs erwähnen sie, dass ein ListTile eine Eigenschaft style hat. Wenn ich jedoch versuche, das hinzuzufügen (wie in der drittletzten Zeile des nachstehenden Codes), erhält diese style-Eigenschaft eine rot-rote Linie darunter und der Compiler sagt mir, 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,),
);
}
Es ist nicht ListTile, das die style-Eigenschaft besitzt. Aber ListTileTheme. ListTileTheme ist ein vererbtesWidget. Und wie andere wird es verwendet, um down - Daten (wie zum Beispiel das Thema hier) weiterzugeben.
Um es zu verwenden, müssen Sie jedes Widget oben Ihre ListTile mit einer ListTileTheme umschließen, die die gewünschten Werte enthält.
ListTile wird sich dann abhängig von der nächstgelegenen ListTileTheme-Instanz selbst gestalten.
Wenn Sie auch einen onTap-Listener mit Ripple-Effekt benötigen, können Sie Ink verwenden:
ListView(
children: [
Ink(
color: Colors.lightGreen,
child: ListTile(
title: Text('With lightGreen background'),
onTap() { },
),
),
],
);
Ich konnte die Hintergrundfarbe der ListTile mit einem BoxDecoration inside Container ändern:
ListView (
children: <Widget>[
new Container (
decoration: new BoxDecoration (
color: Colors.red
),
child: new ListTile (
leading: const Icon(Icons.euro_symbol),
title: Text('250,00')
)
)
]
)
Ich konnte die Hintergrundfarbe von ListTile ändern, indem ich sie dem Container Widget zu einem untergeordneten Element machte und dem Container Widget Farbe hinzufügte.
Hier ist drawerItem die Modellklasse, die den isSelected-Wert enthält. Die Hintergrundfarbe hängt vom isSelected-Wert ab.
Hinweis: Bei nicht ausgewählten Elementen behalten Sie die Farbe Transparent bei, damit der Effekt "Welligkeit" erhalten bleibt.
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,
),
));
}
