Flutter-在相同的将来如何获得不同的结果？

Question

我试图让用户在每个按钮上设置不同的时间。但是对所有这些都显示相同的时间。每当我更改它时，它都会更改其所有文本的时间。我该怎么做，请解释一下？

这是我的代码：

import 'package:flutter/material.dart';
import 'package:flutter_duration_picker/flutter_duration_picker.dart';
import 'dart:async';


class EndurancePage extends StatefulWidget {


 @override


 _EndurancePageState createState() => _EndurancePageState();
}

class _EndurancePageState extends State<EndurancePage> {

  Duration _duration = Duration();

  Future<Null> _selectTime(BuildContext context) async {
    final Duration picked =
        await showDurationPicker(context: context, initialTime: _duration);
    if (picked != null && picked != _duration) {
      print('Time Selected: ${_duration.toString()}');
      setState(() {
        _duration = picked;
      });
 } }




@override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Padding(
              padding: EdgeInsets.only(top: 100.0, bottom: 30.0),
              child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Text(
                      "Excer",
                      textAlign: TextAlign.center,
                      style:
                          const TextStyle(fontSize: 35.0, color: Colors.white),
                    ),
                    Text(
                      "sices",
                      textAlign: TextAlign.center,
                      style: const TextStyle(
                          fontSize: 35.0,
                          color: Colors.white,
                          fontWeight: FontWeight.bold),
                    ),
                  ]),
            ),
            Padding(
              padding: EdgeInsets.only(bottom: 20.0),
              child: Text(
                "Select a few and set their duration.",
                style: const TextStyle(color: Colors.white70, fontSize: 17.0),
              ),
            ),
            SizedBox(
              child: Padding(
                padding: EdgeInsets.symmetric(horizontal: 25.0),
                child: Container(
                  height: 1.0,
                  color: Colors.yellowAccent,
                ),
              ),
            ),
            //---------------LIST OF EVENTS---------------

            Row(
              mainAxisAlignment: MainAxisAlignment.start,
              children: <Widget>[
                Padding(
                  padding: EdgeInsets.only(left: 50.0, top: 20.0, bottom: 10.0),
                  child: Text(
                    "Push UPS",
                    style: const TextStyle(color: Colors.white, fontSize: 25.0),
                  ),
                ),
                Padding(
                  padding: EdgeInsets.only(top: 8.0),
                  child: FlatButton(
                    onPressed: () {
                      _selectTime(context);
                    },
                    child: new Icon(
                      Icons.timelapse,
                      color: Colors.white,
                    ),
                  ),
                ),
                Padding(
                  padding: EdgeInsets.only(top: 8.0, right: 20.0),
                  child: Text(
                    '${_duration.inMinutes.toString()} min',
                    style: const TextStyle(color: Colors.white, fontSize: 25.0),
                  ),
                ),
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.start,
              children: <Widget>[
                Padding(
                  padding: EdgeInsets.only(left: 50.0, top: 20.0, bottom: 10.0),
                  child: Text(
                    "Pull UPS",
                    style: const TextStyle(color: Colors.white, fontSize: 25.0),
                  ),
                ),
                Padding(
                  padding: EdgeInsets.only(top: 8.0),
                  child: FlatButton(
                    onPressed: () {
                      _selectTime(context);
                    },
                    child: new Icon(
                      Icons.timelapse,
                      color: Colors.white,
                    ),
                  ),
                ),
                Padding(
                  padding: EdgeInsets.only(top: 8.0, right: 20.0),
                  child: Text(
                    '${_duration.inMinutes.toString()} min',
                    style: const TextStyle(color: Colors.white, fontSize: 25.0),
                  ),
                ),
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.start,
              children: <Widget>[
                Padding(
                  padding: EdgeInsets.only(left: 50.0, top: 20.0, bottom: 10.0),
                  child: Text(
                    "What's Today?",
                    style: const TextStyle(color: Colors.white, fontSize: 25.0),
                  ),
                ),
                Padding(
                  padding: EdgeInsets.only(top: 8.0),
                  child: FlatButton(
                    onPressed: () {
                      _selectTime(context);
                    },
                    child: new Icon(
                      Icons.timelapse,
                      color: Colors.white,
                    ),
                  ),
                ),
                Padding(
                  padding: EdgeInsets.only(top: 8.0, right: 20.0),
                  child: Text(
                    '${_duration.inMinutes.toString()} min',
                    style: const TextStyle(color: Colors.white, fontSize: 25.0),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

因此，我启动了应用程序，初始时间为0 initial time

然后我在第一个按钮setting time上设置时间

现在它会更改所有按钮final state

上的时间

如何获得不同按钮的不同时间？

Answer 1

问题是您只使用一个变量，而当您更改该变量时，所有Text小部件都会更新为相同的值。

您需要使用三个持续时间变量，每个值一个。

最简单的方法如下：

import 'package:flutter/material.dart';
import 'package:flutter_duration_picker/flutter_duration_picker.dart';
import 'dart:async';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: EndurancePage(),
    );
  }
}

class EndurancePage extends StatefulWidget {
  @override
  _EndurancePageState createState() => _EndurancePageState();
}

class _EndurancePageState extends State<EndurancePage> {
  Duration _duration1 = Duration();
  Duration _duration2 = Duration();
  Duration _duration3 = Duration();

  Future<Null> _selectTime(BuildContext context, int timer) async {
    if (timer == 1) {
      final Duration picked =
          await showDurationPicker(context: context, initialTime: _duration1);
      if (picked != null && picked != _duration1) {
        setState(() {
          _duration1 = picked;
        });
      }
    } else if (timer == 2) {
      final Duration picked =
          await showDurationPicker(context: context, initialTime: _duration2);
      if (picked != null && picked != _duration2) {
        setState(() {
          _duration2 = picked;
        });
      }
    } else if (timer == 3) {
      final Duration picked =
          await showDurationPicker(context: context, initialTime: _duration3);
      if (picked != null && picked != _duration3) {
        setState(() {
          _duration3 = picked;
        });
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Padding(
              padding: EdgeInsets.only(top: 100.0, bottom: 30.0),
              child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Text(
                      "Excer",
                      textAlign: TextAlign.center,
                      style:
                          const TextStyle(fontSize: 35.0, color: Colors.white),
                    ),
                    Text(
                      "sices",
                      textAlign: TextAlign.center,
                      style: const TextStyle(
                          fontSize: 35.0,
                          color: Colors.white,
                          fontWeight: FontWeight.bold),
                    ),
                  ]),
            ),
            Padding(
              padding: EdgeInsets.only(bottom: 20.0),
              child: Text(
                "Select a few and set their duration.",
                style: const TextStyle(color: Colors.white70, fontSize: 17.0),
              ),
            ),
            SizedBox(
              child: Padding(
                padding: EdgeInsets.symmetric(horizontal: 25.0),
                child: Container(
                  height: 1.0,
                  color: Colors.yellowAccent,
                ),
              ),
            ),
            //---------------LIST OF EVENTS---------------

            Row(
              mainAxisAlignment: MainAxisAlignment.start,
              children: <Widget>[
                Padding(
                  padding: EdgeInsets.only(left: 50.0, top: 20.0, bottom: 10.0),
                  child: Text(
                    "Push UPS",
                    style: const TextStyle(color: Colors.white, fontSize: 25.0),
                  ),
                ),
                Padding(
                  padding: EdgeInsets.only(top: 8.0),
                  child: FlatButton(
                    onPressed: () {
                      _selectTime(context, 1);
                    },
                    child: new Icon(
                      Icons.timelapse,
                      color: Colors.white,
                    ),
                  ),
                ),
                Padding(
                  padding: EdgeInsets.only(top: 8.0, right: 20.0),
                  child: Text(
                    '${_duration1.inMinutes.toString()} min',
                    style: const TextStyle(color: Colors.white, fontSize: 25.0),
                  ),
                ),
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.start,
              children: <Widget>[
                Padding(
                  padding: EdgeInsets.only(left: 50.0, top: 20.0, bottom: 10.0),
                  child: Text(
                    "Pull UPS",
                    style: const TextStyle(color: Colors.white, fontSize: 25.0),
                  ),
                ),
                Padding(
                  padding: EdgeInsets.only(top: 8.0),
                  child: FlatButton(
                    onPressed: () {
                      _selectTime(context, 2);
                    },
                    child: new Icon(
                      Icons.timelapse,
                      color: Colors.white,
                    ),
                  ),
                ),
                Padding(
                  padding: EdgeInsets.only(top: 8.0, right: 20.0),
                  child: Text(
                    '${_duration2.inMinutes.toString()} min',
                    style: const TextStyle(color: Colors.white, fontSize: 25.0),
                  ),
                ),
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.start,
              children: <Widget>[
                Padding(
                  padding: EdgeInsets.only(left: 50.0, top: 20.0, bottom: 10.0),
                  child: Text(
                    "What's Today?",
                    style: const TextStyle(color: Colors.white, fontSize: 25.0),
                  ),
                ),
                Padding(
                  padding: EdgeInsets.only(top: 8.0),
                  child: FlatButton(
                    onPressed: () {
                      _selectTime(context, 3);
                    },
                    child: new Icon(
                      Icons.timelapse,
                      color: Colors.white,
                    ),
                  ),
                ),
                Padding(
                  padding: EdgeInsets.only(top: 8.0, right: 20.0),
                  child: Text(
                    '${_duration3.inMinutes.toString()} min',
                    style: const TextStyle(color: Colors.white, fontSize: 25.0),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

另一个将持续时间变量作为参数传递的选项如下：

import 'package:flutter/material.dart';
import 'package:flutter_duration_picker/flutter_duration_picker.dart';
import 'dart:async';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: EndurancePage(),
    );
  }
}

class EndurancePage extends StatefulWidget {
  @override
  _EndurancePageState createState() => _EndurancePageState();
}

class _EndurancePageState extends State<EndurancePage> {
  Duration _duration1 = Duration();
  Duration _duration2 = Duration();
  Duration _duration3 = Duration();

  Future<Duration> _selectTime(BuildContext context, Duration duration) async {
    final Duration picked =
        await showDurationPicker(context: context, initialTime: duration);
    if (picked != null && picked != duration) {
      setState(() {});
      return picked;
    }
    return null;
  }

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Padding(
              padding: EdgeInsets.only(top: 100.0, bottom: 30.0),
              child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Text(
                      "Excer",
                      textAlign: TextAlign.center,
                      style:
                          const TextStyle(fontSize: 35.0, color: Colors.white),
                    ),
                    Text(
                      "sices",
                      textAlign: TextAlign.center,
                      style: const TextStyle(
                          fontSize: 35.0,
                          color: Colors.white,
                          fontWeight: FontWeight.bold),
                    ),
                  ]),
            ),
            Padding(
              padding: EdgeInsets.only(bottom: 20.0),
              child: Text(
                "Select a few and set their duration.",
                style: const TextStyle(color: Colors.white70, fontSize: 17.0),
              ),
            ),
            SizedBox(
              child: Padding(
                padding: EdgeInsets.symmetric(horizontal: 25.0),
                child: Container(
                  height: 1.0,
                  color: Colors.yellowAccent,
                ),
              ),
            ),
            //---------------LIST OF EVENTS---------------

            Row(
              mainAxisAlignment: MainAxisAlignment.start,
              children: <Widget>[
                Padding(
                  padding: EdgeInsets.only(left: 50.0, top: 20.0, bottom: 10.0),
                  child: Text(
                    "Push UPS",
                    style: const TextStyle(color: Colors.white, fontSize: 25.0),
                  ),
                ),
                Padding(
                  padding: EdgeInsets.only(top: 8.0),
                  child: FlatButton(
                    onPressed: () async {
                      _duration1 = await _selectTime(context, _duration1);
                    },
                    child: new Icon(
                      Icons.timelapse,
                      color: Colors.white,
                    ),
                  ),
                ),
                Padding(
                  padding: EdgeInsets.only(top: 8.0, right: 20.0),
                  child: Text(
                    '${_duration1.inMinutes.toString()} min',
                    style: const TextStyle(color: Colors.white, fontSize: 25.0),
                  ),
                ),
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.start,
              children: <Widget>[
                Padding(
                  padding: EdgeInsets.only(left: 50.0, top: 20.0, bottom: 10.0),
                  child: Text(
                    "Pull UPS",
                    style: const TextStyle(color: Colors.white, fontSize: 25.0),
                  ),
                ),
                Padding(
                  padding: EdgeInsets.only(top: 8.0),
                  child: FlatButton(
                    onPressed: () async {
                      _duration2 = await _selectTime(context, _duration2);
                    },
                    child: new Icon(
                      Icons.timelapse,
                      color: Colors.white,
                    ),
                  ),
                ),
                Padding(
                  padding: EdgeInsets.only(top: 8.0, right: 20.0),
                  child: Text(
                    '${_duration2.inMinutes.toString()} min',
                    style: const TextStyle(color: Colors.white, fontSize: 25.0),
                  ),
                ),
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.start,
              children: <Widget>[
                Padding(
                  padding: EdgeInsets.only(left: 50.0, top: 20.0, bottom: 10.0),
                  child: Text(
                    "What's Today?",
                    style: const TextStyle(color: Colors.white, fontSize: 25.0),
                  ),
                ),
                Padding(
                  padding: EdgeInsets.only(top: 8.0),
                  child: FlatButton(
                    onPressed: () async {
                      _duration3 = await _selectTime(context, _duration3);
                    },
                    child: new Icon(
                      Icons.timelapse,
                      color: Colors.white,
                    ),
                  ),
                ),
                Padding(
                  padding: EdgeInsets.only(top: 8.0, right: 20.0),
                  child: Text(
                    '${_duration3.inMinutes.toString()} min',
                    style: const TextStyle(color: Colors.white, fontSize: 25.0),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}