在功能Flutter

Question

我对Flutter / Dart比较陌生，所以我可能犯了一个愚蠢的错误。我在类LinearPercentIndicator内的函数中定义了_FourthRouteState。我在Widget build(BuildContext context)内部使用3个参数调用此函数：context，var1，var2，其中var1是介于0.0和1.0之间的double，而var2是文本对象。

默认的百分比指示器应显示75％，而如果用户按下确认按钮，则该百分比应更改为100％。如果LinearPercentIndicator的动画重新开始，那将是理想的选择，因为该值将从75变为100。

问题是我的页面上没有显示LinearPercentIndicator，并且我没有收到任何错误，所以我不确定自己在做什么错。如果您既可以帮助我编写代码（我只包括相关部分），又可以提供一些相关/有用的文档，那就太好了！

import 'package:flutter/material.dart';
import 'package:percent_indicator/percent_indicator.dart';
import 'package:page_transition/page_transition.dart';


void main() {
  runApp(MaterialApp(
    theme:
    ThemeData(accentColor: Colors.black87),
    home: FourthRoute(),
  ));
}

class FourthRoute extends StatefulWidget {
  final value;

  FourthRoute({Key key, this.value}) : super(key: key);

  @override
  _FourthRouteState createState() => new _FourthRouteState();
}

class _FourthRouteState extends State<FourthRoute> {

  var _textController = new TextEditingController();

  var _formKey = GlobalKey<FormFieldState>();

  getPercentageIndicator(context, var1,var2) {
    setState(() {
      LinearPercentIndicator(
        width: MediaQuery
            .of(context)
            .size
            .width - 50,
        animation: true,
        lineHeight: 20.0,
        animationDuration: 2000,
        percent: var1,
        center: Text(var2),
        linearStrokeCap: LinearStrokeCap.roundAll,
        progressColor: Colors.green,
        backgroundColor: Colors.green.withOpacity(0.2),
      );
    });
  }

  @override
  Widget build(BuildContext context) {

    Color foreground = Colors.green;
    Color background = foreground.withOpacity(0.2);

    return Scaffold(
      body: Stack(
        fit: StackFit.expand,
        children: <Widget>[
          Container(
            decoration: BoxDecoration(
                color: Color.fromRGBO(53, 73, 94, 0.9)),
          ),
          Positioned(
            top: 0.0,
            left: 0.0,
            right: 0.0,
            child: AppBar(
              backgroundColor: Colors.transparent,
              elevation: 0.0,
            ),
          ),

          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Padding(
                padding: EdgeInsets.symmetric(vertical: 50.0),
              ),
              Padding(
                padding: EdgeInsets.fromLTRB(20.0,16.0,0.0,0.0), // left, top, right, bottom
                child: getPercentageIndicator(context,0.75,"75%"),
              ),
            ],
          ),

          Positioned(
            bottom: 150.0,
            right: 20.0,
            child: ButtonTheme(
              minWidth: 150.0,
              child: RaisedButton(
                  padding: EdgeInsets.all(8.0),
                  child: Text('Confirm',
                    style: TextStyle(
                        fontSize: 24,
                        color: Colors.black87,
                        fontWeight: FontWeight.bold
                    ),
                  ),
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(18.0)
                  ),
                  color: Colors.white,
                  splashColor: Colors.blueGrey,
                  onPressed: () {
                    if (_formKey.currentState.validate()) {
                      getPercentageIndicator(context,1.0,"100%");
//                      Navigator.push(
//                        context,
//                        PageTransition(
//                          type: PageTransitionType.fade,
//                          child:HomePage(),
//                          duration: Duration(
//                              seconds: 1
//                          ),
//                        ),
//                      );
                    }
                  }
              ),
            ),
          ),
        ],
      ),
    );
  }

}

Answer 1

为什么要在 getPercentageIndicator 的 setState 中创建 LinearPercentIndicator 小部件的实例？这没有道理。您可能只想退货：

  getPercentageIndicator(context, var1,var2) {
    return LinearPercentIndicator(
      width: MediaQuery
          .of(context)
          .size
          .width - 50,
      animation: true,
      lineHeight: 20.0,
      animationDuration: 2000,
      percent: var1,
      center: Text(var2),
      linearStrokeCap: LinearStrokeCap.roundAll,
      progressColor: Colors.green,
      backgroundColor: Colors.green.withOpacity(0.2),
    );
  }

顺便说一句，您不应在此处使用mediaquery size。使用 LayoutBuilder 来更改宽度，具体取决于窗口小部件的空间：

  getPercentageIndicator(context, var1,var2) {
    return LayoutBuilder(
      builder: (context, constraints) {
        return LinearPercentIndicator(
          width: constraints.maxWidth - 50,
          animation: true,
          lineHeight: 20.0,
          animationDuration: 2000,
          percent: var1,
          center: Text(var2),
          linearStrokeCap: LinearStrokeCap.roundAll,
          progressColor: Colors.green,
          backgroundColor: Colors.green.withOpacity(0.2),
        );
      }
    );
  }