我在分配/更新ListTile中包含的单个SimpleCircularProgressBar时遇到问题。
你好,让我在第一个地方补充说,我只是一个初学者在这个主题。我试图得到一个效果,当我在(inputText)“valueNotifier.value”字段中键入一个数字时,它会改变“SimpleCircularProgressBar”。但是,每次我输入一个新值时,所有“SimpleCircularProgressBar”中的“listTile”都会更新。有没有可能实现一种效果,即“ListTile”小部件中的每个字段都“链接”到其“SimpleCircularProgressBar”?
我的代码:
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/material.dart';
import 'package:simple_circular_progress_bar/simple_circular_progress_bar.dart';
class PlayerTile extends StatefulWidget {
const PlayerTile({Key? key, required this.documents}) : super(key: key);
final List<QueryDocumentSnapshot<Map<String, dynamic>>> documents;
@override
State<PlayerTile> createState() => _PlayerTileState();
}
late ValueNotifier<double> valueNotifier;
class _PlayerTileState extends State<PlayerTile> {
@override
void initState() {
super.initState();
valueNotifier = ValueNotifier(0.0);
}
@override
Widget build(BuildContext context) {
return ListView(
children: <Widget>[
for (final document in widget.documents) ...[
ListTile(
leading: SimpleCircularProgressBar(
size: 50,
progressStrokeWidth: 8,
backStrokeWidth: 8,
valueNotifier: valueNotifier,
mergeMode: true,
onGetText: (double value) {
return Text(
'${value.toInt()}',
style: const TextStyle(
fontSize: 18,
fontWeight: FontWeight.normal,
color: Colors.white,
),
);
},
),
title: Text(
document["gn"],
textAlign: TextAlign.center,
style: const TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
),
contentPadding: const EdgeInsets.all(10),
subtitle: TextField(
textAlign: TextAlign.center,
keyboardType: TextInputType.number,
keyboardAppearance: Brightness.dark,
decoration: InputDecoration(
filled: true,
fillColor:
const Color.fromARGB(255, 190, 183, 183).withOpacity(0.4),
hintText: 'Enter value (max 100)',
hintStyle: TextStyle(color: Colors.black.withOpacity(0.9)),
),
style: const TextStyle(fontSize: 25, color: Colors.white),
onSubmitted: (inputText) {
final double newValue = double.parse(inputText);
valueNotifier.value = newValue;
},
),
trailing: const Icon(Icons.more_vert),
),
const Divider(height: 0),
],
],
);
}
}
它收到的效果:enter image description here
1条答案
按热度按时间i34xakig1#
看起来你只需要将一个唯一的ValueNotifier()关联到每个文档,也许你可以将文档Map到你自己的数据结构中,在那里你可以拥有来自文档的数据和一个valueNotifier,然后你将最终得到一个所述结构的列表:
[{ data:document,valueNotifier:ValueNotifier(0.0)},{ data:document,valueNotifier:ValueNotifier(0.0)},{ etc..}]
那么你只需要引用每个元素的值通知器。
希望这对你有帮助。