Flutter：选择之后，DataPicker不会更改UI ListTile
布鲁诺·诺伊曼
我试图在点击并使用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,
),
onTap代码
// 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; });
setState的作用是：通知框架此对象的内部状态已更改
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
编辑于
相关文章
TOP 榜单
- 1
IE 11中的FormData未定义
- 2
如何一次从多个文本框中获取值？
- 3
在 Python 2.7 中。如何从文件中读取特定文本并分配给变量
- 4
OpenCv：改变 putText() 的位置
- 5
Redux动作正常，但减速器无效
- 6
如何从JavaScript中的MP3文件读取元数据属性？
- 7
如何使用Redux-Toolkit重置Redux Store
- 8
将加号/减号添加到jQuery菜单
- 9
OpenGL纹理格式的颜色错误
- 10
获取并汇总所有关联的数据
- 11
超过时间限制错误C ++
- 12
ActiveModelSerializer仅显示关联的ID
- 13
在交互式Python Shell中获得最后结果
- 14
如何开始为Ubuntu开发
- 15
去噪自动编码器和常规自动编码器有什么区别？
- 16
Excel 2016图表将增长与4个参数进行比较
- 17
算术中的c ++常量类型转换
- 18
使用因子时如何在y轴上的ggplot中插入count或％
- 19
TreeMap中的自定义排序
- 20
如何在R中转置数据
- 21
在 React Native Expo 中使用 react-redux 更改另一个键的值
我来说两句