微信交流群

老孟公众号

Flutter 1.20 版本更新了 时间 类组件的样式。

弹出时间组件:

RaisedButton(
  child: Text('弹出时间选择器'),
  onPressed: () async {
    var result =
        showTimePicker(context: context, initialTime: TimeOfDay.now());
  },
)
1
2
3
4
5
6
7

1.20 版以前的效果:

设置 交互模式,交互模式包含 时钟模式(默认)和 输入模式

var result = showTimePicker(
    context: context,
    initialTime: TimeOfDay.now(),
    initialEntryMode: TimePickerEntryMode.input);
1
2
3
4

时钟模式(TimePickerEntryMode.dial):

输入模式(TimePickerEntryMode.input):

设置顶部标题、取消按钮、确定按钮 文案:

var result = showTimePicker(
    context: context,
    initialTime: TimeOfDay.now(),
    initialEntryMode: TimePickerEntryMode.input,
    helpText: '选择时间',
    cancelText: '取消',
    confirmText: '确定');
1
2
3
4
5
6
7

设置 24小时 制:

var result = showTimePicker(
  context: context,
  initialTime: TimeOfDay.now(),
  builder: (BuildContext context, Widget child) {
    return MediaQuery(
      data: MediaQuery.of(context)
          .copyWith(alwaysUse24HourFormat: true),
      child: child,
    );
  },
);
1
2
3
4
5
6
7
8
9
10
11

设置 黑暗模式

var result = showTimePicker(
  context: context,
  initialTime: TimeOfDay.now(),
  builder: (BuildContext context, Widget child) {
    return Theme(
      data: ThemeData.dark(),
      child: child,
    );
  },
);
1
2
3
4
5
6
7
8
9
10

# 国际化

pubspec.yaml 中引入:

dependencies:
  flutter_localizations:
    sdk: flutter
1
2
3

在顶级组件 MaterialApp 添加支持:

MaterialApp(
  title: 'Flutter Demo',

  localizationsDelegates: [
    GlobalMaterialLocalizations.delegate,
    GlobalWidgetsLocalizations.delegate,
    GlobalCupertinoLocalizations.delegate,
  ],
  supportedLocales: [
    const Locale('zh'),
    const Locale('en'),
  ],
  ...
1
2
3
4
5
6
7
8
9
10
11
12
13

弹出时间组件:

RaisedButton(
  child: Text('弹出时间选择器'),
  onPressed: () async {
    var result =
        showTimePicker(context: context, initialTime: TimeOfDay.now());
  },
)
1
2
3
4
5
6
7

切换系统语言为中文:

不跟随系统语言,直接指定,比如当前系统语言为中文,指定为英文:

var result = showTimePicker(
  context: context,
  initialTime: TimeOfDay.now(),
  builder: (BuildContext context, Widget child) {
    return Localizations(
      locale: Locale('en'),
      delegates: [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
      ],
      child: child,
    );
  },
);
1
2
3
4
5
6
7
8
9
10
11
12
13
14