flutter - 如何将变量从一个类传递给另一个类并将更改后的变量返回？

Question

我是新来的，我正在尝试将倒计时变量从 SetTimerPage 获取到 CupertinoTimePickerButton-Page。然后将其更改为所选时间并返回。接下来，我想将更改后的倒计时提供给倒计时动画开始的下一页。我也愿意提出改进我的语法的建议。谢谢 ：）

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.red,
      ),
      home: SetTimerPage(),
    );
  }
}

class SetTimerPage extends StatefulWidget {
  @override
  _SetTimerPageState createState() => _SetTimerPageState();
}

class _SetTimerPageState extends State<SetTimerPage> {
  final Duration countdown = Duration(minutes: 0, seconds: 0);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('RoundONE'),
      ),
      body: Container(
        padding: const EdgeInsets.all(16),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            CustomRowWidget(
              icon: Icons.alarm_sharp,
              text: 'COUNTDOWN',
              button: CupertinoTimePickerButton(passedValue: countdown),
            ),
            StartButton(countdown: countdown),
          ],
        ),
      ),
    );
  }
}

class CupertinoTimePickerButton extends StatefulWidget {
  Duration passedValue;

  CupertinoTimePickerButton({
    Key key,
    @required this.passedValue,
  }) : super(key: key);

  @override
  _CupertinoTimePickerButtonState createState() =>
      _CupertinoTimePickerButtonState();
}

class _CupertinoTimePickerButtonState extends State<CupertinoTimePickerButton> {
  @override
  Widget build(BuildContext context) {
    return MaterialButton(
      child: Text(
        _formatDuration(widget.passedValue),
        style: TextStyle(color: Colors.white),
      ),
      color: Colors.redAccent,
      onPressed: () {
        _cupertinoTimeSetter(context);
      },
    );
  }

  Future _cupertinoTimeSetter(BuildContext context) {
    return showModalBottomSheet(
      context: context,
      builder: (BuildContext builder) {
        return Container(
          height: MediaQuery.of(context).copyWith().size.height / 2,
          child: CupertinoTimerPicker(
            onTimerDurationChanged: (Duration newDuration) {
              setState(() {
                widget.passedValue = newDuration;
              });
            },
            minuteInterval: 1,
            secondInterval: 5,
            mode: CupertinoTimerPickerMode.ms,
          ),
        );
      },
    );
  }

  String _formatDuration(Duration duration) {
    String twoDigits(int n) => n.toString().padLeft(2, "0");
    String twoDigitMinutes = twoDigits(duration.inMinutes.remainder(60));
    String twoDigitSeconds = twoDigits(duration.inSeconds.remainder(60));
    return "$twoDigitMinutes:$twoDigitSeconds";
  }
}

标签： flutterdartreturn

Answer 1

最好的方法是使用回调将值返回给它的父级，在这种情况下，您可以使用 ValueChanged。然后在父级之后会改变这个变量的值。

class SetTimerPage extends StatefulWidget {
  @override
  _SetTimerPageState createState() => _SetTimerPageState();
}

class _SetTimerPageState extends State<SetTimerPage> {
  Duration countdown;

  @override
  void initState() {
    super.initState();
    countdown = Duration(minutes: 0, seconds: 0);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('RoundONE'),
      ),
      body: Container(
        padding: const EdgeInsets.all(16),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            CustomRowWidget(
              icon: Icons.alarm_sharp,
              text: 'COUNTDOWN',
              button: CupertinoTimePickerButton(
                passedValue: countdown,
                onChanged: (Duration duration) {
                  setState(() {
                    this.countdown = duration;
                  });
                },
              ),
            ),
            StartButton(countdown: countdown),
          ],
        ),
      ),
    );
  }
}

class CupertinoTimePickerButton extends StatelessWidget {

  final Duration passedValue;
  final ValueChanged<Duration> onChanged;

  @override
  Widget build(BuildContext context) {
    return MaterialButton(
      child: Text(
        _formatDuration(widget.passedValue),
        style: TextStyle(color: Colors.white),
      ),
      color: Colors.redAccent,
      onPressed: () {
        _cupertinoTimeSetter(context);
      },
    );
  }

  Future _cupertinoTimeSetter(BuildContext context) {
    return showModalBottomSheet(
      context: context,
      builder: (BuildContext builder) {
        return Container(
          height: MediaQuery.of(context).copyWith().size.height / 2,
          child: CupertinoTimerPicker(
            onTimerDurationChanged: this.onChanged,
            minuteInterval: 1,
            secondInterval: 5,
            mode: CupertinoTimerPickerMode.ms,
          ),
        );
      },
    );
  }

  String _formatDuration(Duration duration) {
    String twoDigits(int n) => n.toString().padLeft(2, "0");
    String twoDigitMinutes = twoDigits(duration.inMinutes.remainder(60));
    String twoDigitSeconds = twoDigits(duration.inSeconds.remainder(60));
    return "$twoDigitMinutes:$twoDigitSeconds";
  }
}