在下面的 Flutter 应用程序中，我试图仅在每张卡片计数时在每张卡片中显示一个 LinearProgressIndicator。正确的进度打印到控制台，但我不知道如何从 LinearProgressIndicator 小部件访问“stepProgress”变量来更新 View 。

卡片是用构建器构建的，因为它们会根据 map (对象)的输入列表(数组)发生变化。

import 'dart:async';

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

final key = new GlobalKey<_MyHomePageState>();
List<Widget> cards = [];

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'App Title',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        canvasColor: Colors.grey[350],
      ),
      home: MyHomePage(title: 'Title', key: key),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  State createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List _sequence = [];
  double stepProgress = 0.0;

  @override
  initState() {
    super.initState();
    setState(() => _sequence = [
          {'iterations': 1, 'time': 10},
          {'iterations': 3, 'time': 7},
          {'iterations': 2, 'time': 5},
        ]);

    setState(() {
      cards = getRun();
    });

    _countdown(_sequence, null);
  }

  getRun() {
    List<Widget> runCards = [];
    for (var group in _sequence) {
      runCards.add(_buildCard(CardModel(
        iterationsInGroup: group['iterations'],
        timeEach: group['time'],
      )));
    }
    return runCards;
  }

  void _countdown(seq, iters) async {
    if (seq.length > 0) {
      int i = iters == null ? seq[0]['iterations'] : iters;
      if (i > 0) {
        int duration = seq[0]["time"];
        Timer.periodic(Duration(seconds: 1), (timer) {
          if (timer.tick < duration) {
            setState(() {
              stepProgress = timer.tick / duration;
            });
            print('Iteration $i:  ${timer.tick} / $duration = $stepProgress');
          } else {
            print('Finished iteration $i');
            timer.cancel();
            i = i - 1;
            if (i > 0) {
              _countdown(seq, i); // Next iteration
            } else {
              print('Finished group ${seq.length}');
              timer.cancel();
              if (seq.length > 1) {
                _countdown(seq.sublist(1), null); // Next group
              } else {
                print('Done');
              }
            }
          }
        });
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Column(
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.all(15.0),
            child: Text(
              'Header',
              style: TextStyle(
                fontSize: 24.0,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
          Expanded(
            child: ListView(
              children: cards,
              padding: const EdgeInsets.all(8.0),
            ),
          ),
        ],
      ),
    );
  }
}

Widget _buildCard(CardModel card) {
  List<Widget> columnData = <Widget>[];

  columnData.add(
    Column(
      children: <Widget>[
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: Text(
            card.timeEach.toString() +
                ' seconds ' +
                card.iterationsInGroup.toString() +
                ' times',
            style: TextStyle(fontSize: 22.0),
          ),
        ),
        true //key.currentState.activeStep == card.cardStep //TODO: This doesn't work
            ? LinearProgressIndicator(
                value: key.currentState.stepProgress,
              )
            : Container(width: 0.0, height: 0.0),
      ],
    ),
  );

  return Card(
    child: Padding(
      padding: const EdgeInsets.symmetric(vertical: 15.0),
      child: Column(children: columnData),
    ),
  );
}

class CardModel {
  final int iterationsInGroup;
  final int timeEach;

  CardModel({
    this.iterationsInGroup,
    this.timeEach,
  });
}

最佳答案

我稍微修改了你的代码，这有点乱，因此我向你推荐以下内容:

• 为您的 ChildView 创建一个 StatefulWidget(就像我下面的代码)。
• 将进度逻辑保留在 ChildView 中，这样可以很容易地更改状态。

• 我必须跟踪 Globalkey 以便将更改刷新到 subview 中，但是如果您将逻辑处理到每个 subview 中，则不需要 全局键。

      import 'dart:async';
  
  import 'package:flutter/material.dart';
  
  void main() => runApp(MyApp());
  
  final key = new GlobalKey<_MyHomePageState>();
  
  class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        title: 'App Title',
        theme: ThemeData(
          primarySwatch: Colors.blue,
          canvasColor: Colors.grey[350],
        ),
        home: MyHomePage(title: 'Title', key: key),
      );
    }
  }
  
  class MyHomePage extends StatefulWidget {
    MyHomePage({Key key, this.title}) : super(key: key);
  
    final String title;
  
    @override
    State createState() => _MyHomePageState();
  }
  
  class _MyHomePageState extends State<MyHomePage> {
    List _sequence = [];
   List<ChildView> runCards = [];
    @override
    initState() {
      super.initState();
      setState(() => _sequence = [
            {'iterations': 1, 'time': 10, 'progress': 0.0},
            {'iterations': 3, 'time': 7, 'progress': 0.0},
            {'iterations': 2, 'time': 5, 'progress': 0.0},
          ]);
      getRun();
      _countdown(_sequence, null);
    }
  
    getRun() {
      for (var group in _sequence) {
        var cardModel = CardModel(
          iterationsInGroup: group['iterations'],
          timeEach: group['time'],
          progress: group['progress'],
        );
  
        runCards.add(new ChildView(cardModel,new GlobalKey<_ChildViewState>()));
      }
      setState(() {
  
          });
      return runCards;
    }
  
    void _countdown(seq, iters) async {
      if (seq.length > 0) {
        int i = iters == null ? seq[0]['iterations'] : iters;
        if (i > 0) {
          int duration = seq[0]["time"];
          Timer.periodic(Duration(seconds: 1), (timer) {
            if (timer.tick <= duration) {
              var childView = runCards[i-1];
              double stepProgress = 0.0;
              stepProgress = timer.tick / duration;
              childView.key.currentState.updateProgress(stepProgress);
  
              print('Iteration $i:  ${timer.tick} / $duration = $stepProgress');
            } else {
              print('Finished iteration $i');
              timer.cancel();
              i = i - 1;
              if (i > 0) {
                _countdown(seq, i); // Next iteration
              } else {
                print('Finished group ${seq.length}');
                timer.cancel();
                if (seq.length > 1) {
                  _countdown(seq.sublist(1), null); // Next group
                } else {
                  print('Done');
                }
              }
            }
          });
        }
      }
    }
  
    @override
    Widget build(BuildContext context) {
  
      return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Column(
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.all(15.0),
              child: Text(
                'Header',
                style: TextStyle(
                  fontSize: 24.0,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ),
            Expanded(
              child: ListView(
                children: runCards,
                padding: const EdgeInsets.all(8.0),
              ),
            ),
          ],
        ),
      );
    }
  }
  
  class CardModel {
    final int iterationsInGroup;
    final int timeEach;
    double progress;
  
    CardModel({
      this.iterationsInGroup,
      this.timeEach,
      this.progress,
    });
  }
  
  
  class ChildView extends StatefulWidget {
  
   final CardModel card;
   final GlobalKey<_ChildViewState> key;
   ChildView(this.card, this.key) : super(key: key);
  
    @override
    _ChildViewState createState() => _ChildViewState();
  }
  
  class _ChildViewState extends State<ChildView> {
  
    void updateProgress(double progress){
       setState(() {
              widget.card.progress = progress;
            });
    }
  
    @override
    Widget build(BuildContext context) {
      List<Widget> columnData = <Widget>[];
  
    columnData.add(
      Column(
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Text(
              widget.card.timeEach.toString() +
                  ' seconds ' +
                  widget.card.iterationsInGroup.toString() +
                  ' times',
              style: TextStyle(fontSize: 22.0),
            ),
          ),
          widget.card.progress < 1 //key.currentState.activeStep == card.cardStep //TODO: This doesn't work
              ? LinearProgressIndicator(
                  value: widget.card.progress,
                )
              : Container( child: new Text("Completed"),),
        ],
      ),
    );
  
    return Card(
      child: Padding(
        padding: const EdgeInsets.symmetric(vertical: 15.0),
        child: Column(children: columnData),
      ),
    );
    }
  }
  

关于flutter - 使用构建器构建时如何访问列表项？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50789822/