flutter valueNotifier和CircularProgressIndicat可以“单独”为ListView中的不同ListTile工作吗?

iq3niunx  于 2023-06-30  发布在  Flutter
关注(0)|答案(1)|浏览(140)

我在分配/更新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

i34xakig

i34xakig1#

看起来你只需要将一个唯一的ValueNotifier()关联到每个文档,也许你可以将文档Map到你自己的数据结构中,在那里你可以拥有来自文档的数据和一个valueNotifier,然后你将最终得到一个所述结构的列表:
[{ data:document,valueNotifier:ValueNotifier(0.0)},{ data:document,valueNotifier:ValueNotifier(0.0)},{ etc..}]
那么你只需要引用每个元素的值通知器。
希望这对你有帮助。

相关问题