Flutter - CupertinoDatePicker 初始日期时间仅更新一次

Question

我创建了一个

CupertinoDatePicker

小部件，并将初始值设置为变量。

当用户单击屏幕中的另一个小部件时，我想将选择器中的选定值更新为该变量值 - 但它不起作用（尽管

CupertinoDatePicker

小部件被重建）。

这是一个错误还是我做错了什么？

代码（可以复制粘贴到dartPad中）：

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);
final _time = DateTime.now();
int _min = 5;

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatefulWidget {
  @override
  createState() => MyWidgetSate();
}

class MyWidgetSate extends State<MyWidget> {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('_min = ' + _min.toString(), style: Theme.of(context).textTheme.headline4),
        _buildDurationPicker(context),
        RaisedButton(
            onPressed: () {
              print('hello');
              setState(() {
                _min += 5;
              });
            },
            child: const Text('Add', style: TextStyle(fontSize: 20)),
          ),
        ],
    );
  }
}

Widget _buildDurationPicker(BuildContext context) {
    DateTime initDateTime = DateTime(_time.year, _time.month, _time.day)
        .add(Duration(minutes: _min));
    return Container(
      height: 216.0,
      color: Colors.white,
      child: CupertinoDatePicker(
        mode: CupertinoDatePickerMode.time,
        use24hFormat: true,
        initialDateTime: initDateTime,
        backgroundColor: Colors.transparent,
        onDateTimeChanged: (DateTime date) {
          //
        },
      ),
    );
  }

Answer 1

尽管您更新了小部件的状态，

CupertinoDatePicker

仍在内部维护状态，并且仅在其

initialDateTime

上设置

initState

。

要在每次设置

initialDateTime

时强制重建，请将

UniqueKey()

指定为

key

的

CupertinoDatePicker

，每次您的状态更改时都会使用新的

initDateTime

进行重建。

(...)
  CupertinoDatePicker(
        key: UniqueKey(),
        mode: CupertinoDatePickerMode.time,
        use24hFormat: true,
        initialDateTime: initDateTime,
        backgroundColor: Colors.transparent,
        onDateTimeChanged: (DateTime date) {
          //
        },
      ),

Answer 2

我从 Miguel Ruivo 那里得到了见解，并将 UniqueKey() 转换为变量。否则，由于不断刷新时间选择器，滚动效果将会滞后。 这样就可以在需要的时候通过setState刷新key了。

Key _key = UniqueKey();

// update the unique key
(...)
setState(() {
    _key = UniqueKey();
});

(...)
CupertinoDatePicker(
    key: _key,
    mode: CupertinoDatePickerMode.time,
    use24hFormat: true,
    initialDateTime: initDateTime,
    backgroundColor: Colors.transparent,
    onDateTimeChanged: (DateTime date) {
      //
    },
  ),