如何使用Flutter中TextField小部件的输入设置计时器的持续时间?

时间:2019-04-02 13:32:42

标签: flutter flutter-layout flutter-animation

我正在使用Tensor编程中的动画计时器。可以在这里找到:https://github.com/tensor-programming/flutter_timer_example

我已经在程序的另一页上(而不是动画计时器所在的位置)实现了TextField小部件。我的问题是如何在{{ 1}}属性是否与动画计时器中的TextField的值使用onSubmitted相同?动画计时器已经在使用TextEditingController,如何将Duration集成到实现计时器的AnimationController类中?为了将文本字段的输入值传递到TextEditingController的持续时间值中。

谢谢!任何帮助将不胜感激。这是我的Github存储库,供您进一步参考:https://github.com/dscognitif/Sati_App

这是动画计时器窗口小部件的源代码:

FirstPage

这是timerString的源代码,它位于另一个dart文件和应用程序的另一个页面中:

import 'package:flutter/material.dart';
import 'dart:math' as math;

class FirstPage extends StatefulWidget {
  @override
  FirstPageState createState() => FirstPageState(); 
}

class FirstPageState extends State<FirstPage> with TickerProviderStateMixin {
  AnimationController controller;

String get timerString {
    Duration duration = controller.duration * controller.value;
    return '${duration.inMinutes}:${(duration.inSeconds % 60).toString().padLeft(2, '0')}';
  }

  @override
  void initState() {
    super.initState();
    controller = AnimationController(
      vsync: this,
      duration: Duration(seconds: 2),
    );
  }

  @override
  Widget build(BuildContext context) {
    ThemeData themeData = Theme.of(context);
    return Scaffold(
      body: Padding(
        padding: EdgeInsets.all(8.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            Expanded(
              child: Align(
                alignment: FractionalOffset.center,
                child: AspectRatio(
                  aspectRatio: 1.0,
                  child: Stack(
                    children: <Widget>[
                      Positioned.fill(
                        child: AnimatedBuilder(
                          animation: controller,
                          builder: (BuildContext context, Widget child) {
                            return CustomPaint(
                                painter: TimerPainter(
                              animation: controller,
                              backgroundColor: Colors.white,
                              color: themeData.indicatorColor,
                            ));
                          },
                        ),
                      ),
                      Align(
                        alignment: FractionalOffset.center,
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                          crossAxisAlignment: CrossAxisAlignment.center,
                          children: <Widget>[
                            Text(
                              "Count Down",
                              style: themeData.textTheme.subhead,
                            ),
                            AnimatedBuilder(
                                animation: controller,
                                builder: (BuildContext context, Widget child) {
                                  return Text(
                                    timerString,
                                    style: themeData.textTheme.display4,
                                  );
                                }),
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ),
            Container(
              margin: EdgeInsets.all(8.0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: <Widget>[
                  FloatingActionButton(
                    child: AnimatedBuilder(
                      animation: controller,
                      builder: (BuildContext context, Widget child) {
                        return Icon(controller.isAnimating
                            ? Icons.pause
                            : Icons.play_arrow);
                      },
                    ),
                    onPressed: () {
                      if (controller.isAnimating)
                        controller.stop();
                      else {
                        controller.reverse(
                            from: controller.value == 0.0
                                ? 1.0
                                : controller.value);
                      }
                    },
                  )
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}

class TimerPainter extends CustomPainter {
  TimerPainter({
    this.animation,
    this.backgroundColor,
    this.color,
  }) : super(repaint: animation);

  final Animation<double> animation;
  final Color backgroundColor, color;

  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint()
      ..color = backgroundColor
      ..strokeWidth = 5.0
      ..strokeCap = StrokeCap.round
      ..style = PaintingStyle.stroke;

    canvas.drawCircle(size.center(Offset.zero), size.width / 2.0, paint);
    paint.color = color;
    double progress = (1.0 - animation.value) * 2 * math.pi;
    canvas.drawArc(Offset.zero & size, math.pi * 1.5, -progress, false, paint);
  }

  @override
  bool shouldRepaint(TimerPainter old) {
    return animation.value != old.animation.value ||
        color != old.color ||
        backgroundColor != old.backgroundColor;
  }
}

1 个答案:

答案 0 :(得分:0)

您可以将onSubmitted更改为:

struct Profile {

    var isDisabled1 = false
    var isDisabled2 = false
    var isDisabled3 = false

}

class ThreeColCell: UITableViewCell {

    @IBOutlet var mainStackView: UIStackView!

    @IBOutlet var view1: UIView!
    @IBOutlet var view2: UIView!
    @IBOutlet var view3: UIView!

    var arrayOfRealViews: [UIView] = [UIView]()
    var arrayOfBlankViews: [UIView] = [UIView]()

    var myProfile: Profile = Profile() {
        didSet {
            // hide all the views in the stack
            mainStackView.arrangedSubviews.forEach {
                $0.isHidden = true
            }

            // I don't know how you have your button/label views set up, but here
            // you would set button titles and label texts based on myProfile properties

            // create a [1, 2, 3] array based on the .isDisabled# properties of the Profile object
            var a = [Int]()

            if !myProfile.isDisabled1 {
                a.append(1)
            }
            if !myProfile.isDisabled2 {
                a.append(2)
            }
            if !myProfile.isDisabled3 {
                a.append(3)
            }

            // you now have an array "a" that will be
            //  [1, 2, 3]    or
            //  [1, 2]       or
            //  [2]          or
            //  [2, 3]       etc

            // show the specified "real" views (arrays are Zero-based)
            a.forEach { i in
                arrayOfRealViews[i - 1].isHidden = false
            }

            // pad stackview to 3 using "blank" view(s)
            // if 1 real view, show 2 blank views
            // if 2 real views, show 1 blank view
            // if 3 real views, don't show any blank views
            for i in 0..<(3 - a.count) {
                arrayOfBlankViews[i].isHidden = false
            }

        }
    }

    override func awakeFromNib() {
        super.awakeFromNib()

        // ordered array of views 1 to 3
        arrayOfRealViews = [view1, view2, view3]

        // add 3 "blank" views to the stack view
        //  and to array of blank views
        for _ in 0..<3 {
            let v = UIView()
            v.translatesAutoresizingMaskIntoConstraints = false
            v.backgroundColor = .clear
            mainStackView.addArrangedSubview(v)
            arrayOfBlankViews.append(v)
        }
    }

}

class ThreeColTableViewController: UITableViewController {

    var profilesArray: [Profile] = [Profile]()

    override func viewDidLoad() {
        super.viewDidLoad()

        // create a few Profiles
        // all 3 views are "enabled" by default

        var p = Profile()

        profilesArray.append(p)

        // Profile with views 2 and 3 disabled
        p = Profile()
        p.isDisabled2 = true
        p.isDisabled3 = true

        profilesArray.append(p)

        // Profile with view 3 disabled
        p = Profile()
        p.isDisabled3 = true

        profilesArray.append(p)

        // Profile with view 1 disabled
        p = Profile()
        p.isDisabled1 = true

        profilesArray.append(p)

        // Profile with views 1 and 2 disabled
        p = Profile()
        p.isDisabled1 = true
        p.isDisabled2 = true

        profilesArray.append(p)

    }

    override func numberOfSections(in tableView: UITableView) -> Int {
        return 1
    }

    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return profilesArray.count
    }

    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "ThreeColCell", for: indexPath) as! ThreeColCell

        cell.myProfile = profilesArray[indexPath.row]

        return cell
    }

}

然后您可以通过致电:

onSubmitted: (v) => Navigator.pop(context, v),