我试图在点击并使用DataPicker选择新值后更改ListView的ListTile内的文本小部件。
点击ListTile之后，我将为ListTile的Subtitle元素选择一个新值(实际上是“Select ...”)
单击确定按钮后，该值不会更改字幕元素。
DataPicker返回正确的值，然后更新链接到Text Widget的相应变量:
VSCode控制台日志
I/flutter ( 8578): Method onTap triggered
I/flutter ( 8578): Method onChange from showMaterialScrollPicker triggered
I/flutter ( 8578): New value:Option 2
class _BodyState extends State<Body> {
List<CaracteristicaListItem> caracteristicasList = <CaracteristicaListItem>[];
@override
Widget build(BuildContext context) {
caracteristicasList = <CaracteristicaListItem>[
CaracteristicaListItemScroll(
"Test",
Icon(
Icons.bubble_chart,
color: Colors.white70,
size: 36.0,
),
this,
<String>["Option 1", "Option 2"],
),
];
/*
* Some code
*/
child: ListView.separated(
separatorBuilder: (context, index) => Divider(
color: Colors.white70,
),
itemBuilder: (BuildContext context, int index) {
var caracteristica = caracteristicasList[index];
return Material(
color: Colors.white24,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topRight: Radius.circular(100),
bottomRight: Radius.circular(100),
),
side: BorderSide(style: BorderStyle.none),
),
child: ListTile(
leading: caracteristica.icon,
title: caracteristica.textTitle,
subtitle: caracteristica.textSubtitle,
onTap: () => caracteristica.onTap(),
),
);
},
itemCount: caracteristicasList.length,
),
// Generic class
abstract class CaracteristicaListItem {
final String title;
final Icon icon;
final _BodyState state;
Text textTitle;
Text textSubtitle;
String subtitle = "Select...";
bool isValueChanged = false;
CaracteristicaListItem(this.title, this.icon, this.state) {}
void onTap();
}
// Scroll DataPicker
class CaracteristicaListItemScroll extends CaracteristicaListItem {
final List<String> scrollData;
CaracteristicaListItemScroll(
String title, Icon icon, _BodyState state, this.scrollData)
: super(title, icon, state) {
// Generate a Text() elements
textTitle = _buildTitle();
textSubtitle = _buildSubtitle();
}
// Tap Handler
@override
void onTap() {
print("Method onTap triggered");
// Call Addon flutter_material_pickers: ^1.7.3
showMaterialScrollPicker(
showDivider: true,
context: state.context,
title: "Select",
items: scrollData,
selectedItem: isValueChanged ? super.subtitle : scrollData[0],
onChanged: (value) {
print("Method onChange from showMaterialScrollPicker triggered");
print("New value: " + value);
super.subtitle = value;
isValueChanged = true;
},
);
}
Text _buildTitle() {
// Generate a Text() with variable escape
// to update after selection using DataPicker
return Text(
"$title",
style: TextStyle(
color: Colors.white70,
fontWeight: FontWeight.bold,
fontSize: 24.0,
),
);
}
Text _buildSubtitle() {
// Generate a Text() with variable escape
// to update after selection using DataPicker
return Text(
"$subtitle",
style: TextStyle(
color: Colors.white70,
fontSize: 18.0,
),
);
}
}
最佳答案
您可以尝试将setState((){})放在onTap中，以实际重建UI。
像这样 :
SetState((){
super.subtitle = value;
isValueChanged = true; });
关于flutter - Flutter:选择后，DatePicker不会更改UI ListTile，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/63609420/