Question

在下面的Flutter应用程序中，我尝试仅在该卡计数时在每张卡中显示LinearProgressIndicator。正确的进度打印到控制台，但我无法弄清楚如何访问＆＃34; stepProgress＆＃34; LinearProgressIndicator小部件中的变量用于更新视图。

这些卡是使用构建器构建的，因为它们将根据地图（对象）的输入列表（数组）进行更改。

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,
  });
}

Answer 1

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

为您的ChildView创建StatefulWidget（如下面的代码所示）。
将进度逻辑保留在ChildView中，以这种方式更改状态会很容易。

我必须跟踪Globalkey才能刷新子视图中的更改，但如果您处理每个子项的逻辑，则不需要GlobalKey。

    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),
    ),
  );
  }
}

使用构建器构建时如何访问列表项？

1 个答案: