「Flutter 实战」1.20版本更新及新增组件

老孟导读：Flutter 1.20 更新了 Slider、RangeSlider、日期选择器组件、时间选择器组件的样式，新增了交换组件：InteractiveViewer，下面详细介绍其用法。

滑块

Flutter 1.20 版本将 Slider 和 RangeSlider 小部件更新为最新的 Material 准则。新的滑块在设计时考虑到了更好的可访问性：轨道更高，滑块带有阴影，并且值指示器具有新的形状和改进的文本缩放支持。

Slider

基础用法：

<code>class SliderDemo extends StatefulWidget {
  @override
  _SliderDemoState createState() => _SliderDemoState();
}

class _SliderDemoState extends State<SliderDemo> {
  double _sliderValue = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text('值：$_sliderValue'),
            Slider(
              value: _sliderValue,
              onChanged: (v){ 

                setState(() {
                  _sliderValue = v;
                });
              },
            )
          ],
        ),
      ),
    );
  }
}/<code>

• value：当前值。
• onChanged：滑块值改变时回调。

看看 Flutter 1.20 版本以前的样式（我的珍藏）：

明显的感觉就是滑块轨道变粗了，滑块变的更有立体感（加了阴影）了。

Slider 默认滑动范围是 0-1，修改为 1-100:

<code>Slider(
  value: _sliderValue,
  min: 1,
  max: 100,
  onChanged: (v){
    setState(() { 

      _sliderValue = v;
    });
  },
)/<code>

设置滑块的滑动为 离散的，即滑动值为 0、25 、50、75 100：

<code>Slider(
  value: _sliderValue,
  min: 0,
  max: 100,
  divisions: 4,
  onChanged: (v){
    setState(() {
      _sliderValue = v;
    });
  }, 

)/<code>

设置标签，滑动过程中在其上方显示：

<code>Slider(
  value: _sliderValue,
  label: '$_sliderValue',
  min: 0,
  max: 100,
  divisions: 4,
  onChanged: (v){
    setState(() {
      _sliderValue = v;
    });
  },
)/<code>

看看 Flutter 1.20 版本以前的样式（依然是我的珍藏）：

个人感觉以前的更好看。

下面是官方给的 Slider 结构图：

• 1 ：轨道（Track），1 和 4 是有区别的，1 指的是底部整个轨道，轨道显示了可供用户选择的范围。对于从左到右（LTR）的语言，最小值出现在轨道的最左端，而最大值出现在最右端。对于从右到左（RTL）的语言，此方向是相反的。
• 2：滑块（Thumb），位置指示器，可以沿着轨道移动，显示其位置的选定值。
• 3：标签（label），显示与滑块的位置相对应的特定数字值。
• 4：刻度指示器（Tick mark），表示用户可以将滑块移动到的预定值。

自定义滑块 激活的颜色 和 未激活的颜色：

<code>Slider(
  activeColor: Colors.red,
  inactiveColor: Colors.blue,
  value: _sliderValue,
  label: '$_sliderValue',
  min: 0, 

  max: 100,
  divisions: 4,
  onChanged: (v){
    setState(() {
      _sliderValue = v;
    });
  },
)/<code>

这个自定义比较笼统，下面来一个更细致的自定义：

<code>SliderTheme(
  data: SliderTheme.of(context).copyWith(
      activeTrackColor: Color(0xff404080),
      thumbColor: Colors.blue,
      overlayColor: Colors.green,
      valueIndicatorColor: Colors.purpleAccent),
  child: Slider(
    value: _sliderValue, 

    label: '$_sliderValue',
    min: 0,
    max: 100,
    divisions: 4,
    onChanged: (v) {
      setState(() {
        _sliderValue = v;
      });
    },
  ),
)/<code>

这个基本可以完全自定义样式了。

如何在 Flutter 1.20 版本使用以前的标签样式呢？

<code>SliderTheme(
  data: SliderTheme.of(context).copyWith( 

    valueIndicatorShape: PaddleSliderValueIndicatorShape(),
  ),
  child: Slider(
    value: _sliderValue,
    label: '$_sliderValue',
    min: 0,
    max: 100,
    divisions: 4,
    onChanged: (v) {
      setState(() {
        _sliderValue = v;
      });
    },
  ),
)/<code>

RectangularSliderValueIndicatorShape 表示矩形样式：

RangeSlider

RangeSlider 和 Slider 几乎一样，RangeSlider 是范围滑块，想要选择一段值，可以使用 RangeSlider。

<code>RangeValues _rangeValues = RangeValues(0, 25);

RangeSlider(
  values: _rangeValues,
  labels: RangeLabels('${_rangeValues.start}','${_rangeValues.end}'),
  min: 0,
  max: 100,
  divisions: 4,
  onChanged: (v) {
    setState(() { 

      _rangeValues = v;
    });
  },
),/<code>

滑块状态

ios风格的 Slider

ios风格的 Slider，使用 CupertinoSlider：

<code>double _sliderValue = 0;
CupertinoSlider(
  value: _sliderValue,
  onChanged: (v) {
    setState(() {
      _sliderValue = v;
    });
  },
)
/<code>

当然也可以根据平台显示不同风格的Slider，ios平台显示CupertinoSlider效果，其他平台显示Material风格，用法如下：

<code>Slider.adaptive(
  value: _sliderValue,
  onChanged: (v) {
    setState(() {
      _sliderValue = v;
    });
  },
)
/<code>

Material风格日期选择器

Flutter 1.20 版本更新了 日期 类组件的样式，加入了新的紧凑设计以及对日期范围的支持。

showDatePicker

结构图

1. 标题
2. 选中的日期
3. 切换到输入模式
4. 年选择菜单
5. 月份分页
6. 当前时间
7. 选中日期

输入模式 结构图：

1. 标题
2. 选中日期
3. 切换 日历模式
4. 输入框

基础用法

点击按钮弹出日期组件：

<code> RaisedButton(
          child: Text('弹出日期组件'),
          onPressed: () async {
            await showDatePicker(
              context: context,
              initialDate: DateTime.now(),
              firstDate: DateTime(2010),
              lastDate: DateTime(2025),
            );/<code>

• initialDate：初始化时间，通常情况下设置为当前时间。
• firstDate：表示开始时间，不能选择此时间前面的时间。
• lastDate：表示结束时间，不能选择此时间之后的时间。

设置日期选择器对话框的模式：

<code>var result = await showDatePicker(
  context: context,
  initialDate: DateTime.now(),
  firstDate: DateTime(2010),
  lastDate: DateTime(2025),
  initialEntryMode: DatePickerEntryMode.input,
);/<code>

直接显示 输入模式，默认是日历模式。

设置日历日期选择器的初始显示，包含 day 和 year：

<code>var result = await showDatePicker(
  context: context,
  initialDate: DateTime.now(),
  firstDate: DateTime(2010),
  lastDate: DateTime(2025),
  initialDatePickerMode: DatePickerMode.year,
);/<code>

和以前的版本对比：

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

<code>var result = await showDatePicker(
  context: context,
  initialDate: DateTime.now(),
  firstDate: DateTime(2010),
  lastDate: DateTime(2025),
  helpText: '选则日期',
  cancelText: '取消',
  confirmText: '确定',
);/<code>

修改 输入模式 下文案：

<code>var result = await showDatePicker(
  context: context,
  initialDate: DateTime.now(),
  firstDate: DateTime(2010),
  lastDate: DateTime(2025),
  errorFormatText: '错误的日期格式',
  errorInvalidText: '日期格式非法',
  fieldHintText: '月/日/年',
  fieldLabelText: '填写日期',
);/<code>

设置可选日期范围

<code>var result = await showDatePicker(
  context: context,
  initialDate: DateTime.now(),
  firstDate: DateTime(2010),
  lastDate: DateTime(2025),
  selectableDayPredicate: (date) {
    return date.difference(DateTime.now()).inMilliseconds < 0;
  },
);/<code>

今天以后的日期全部为灰色，不可选状态。

设置深色主题

设置深色主题使 <code>builder/<code> ，其用于包装对话框窗口小部件以添加继承的窗口小部件，例如<code>Theme/<code>，设置深色主题如下：

<code>var result = await showDatePicker(
  context: context,
  initialDate: DateTime.now(),
  firstDate: DateTime(2010),
  lastDate: DateTime(2025),
  builder: (context,child){
    return Theme(
      data: ThemeData.dark(),
      child: child,
    );
  }
);/<code>

获取选中的日期

showDatePicker 方法是 Future 方法，点击日期选择控件的确定按钮后，返回选择的日期。

<code>var result = await showDatePicker(
              context: context,
              initialDate: DateTime.now(),
              firstDate: DateTime(2010),
              lastDate: DateTime(2025),
            );

print('$result');/<code>

result 为选择的日期。

CalendarDatePicker

日期组件直接显示在页面上，而不是弹出显示：

<code>CalendarDatePicker(
  initialDate: DateTime.now(),
  firstDate: DateTime(2010),
  lastDate: DateTime(2025),
  onDateChanged: (d) {
    print('$d');
  },
)/<code>

其参数和 showDatePicker 一样。

范围日期

选择范围日期使用 showDateRangePicker：

<code>RaisedButton(
  child: Text('范围日期'),
  onPressed: () async {
    var date = showDateRangePicker(context: context, firstDate: DateTime(2010), lastDate: DateTime(2025));
  },
),/<code>

其参数和 showDatePicker 一样。

范围日期结构图：

1. 标题
2. 选定的日期范围
3. 切换到输入模式
4. 月和年标签
5. 当前时间
6. 开始时间
7. 选中时间范围
8. 结束时间

国际化

国际化都是一个套路，下面以 showDatePicker 为例：

在 pubspec.yaml 中引入：

<code>dependencies:
  flutter_localizations:
    sdk: flutter/<code>

在顶级组件 MaterialApp 添加支持：

<code>MaterialApp(
  title: 'Flutter Demo',

  localizationsDelegates: [
    GlobalMaterialLocalizations.delegate,
    GlobalWidgetsLocalizations.delegate,
    GlobalCupertinoLocalizations.delegate,
  ],
  supportedLocales: [
    const Locale('zh'),
    const Locale('en'),
  ],
  .../<code>

弹出日期组件：

<code>var result = await showDatePicker(
  context: context,
  initialDate: DateTime.now(),
  firstDate: DateTime(2010),
  lastDate: DateTime(2025),
);/<code>

此时将系统语音调整为

此组件只支持中文，不管系统设置语言：

<code>var result = await showDatePicker(
  context: context,
  initialDate: DateTime.now(),
  firstDate: DateTime(2010),
  lastDate: DateTime(2025),
  locale: Locale('zh')
);/<code>

Material风格时间选择器

Flutter 1.20 版本更新了

基础使用

弹出时间组件：

<code>RaisedButton(
  child: Text('弹出时间选择器'),
  onPressed: () async {
    var result =
        showTimePicker(context: context, initialTime: TimeOfDay.now());
  },
)/<code>

1.20 版以前的效果：

设置 交互模式，交互模式包含 时钟模式（默认）和 输入模式。

<code>var result = showTimePicker(
    context: context,
    initialTime: TimeOfDay.now(),
    initialEntryMode: TimePickerEntryMode.input);/<code>

时钟模式（TimePickerEntryMode.dial）：

输入模式（TimePickerEntryMode.input）：

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

<code>var result = showTimePicker(
    context: context,
    initialTime: TimeOfDay.now(),
    initialEntryMode: TimePickerEntryMode.input,
    helpText: '选择时间',
    cancelText: '取消',
    confirmText: '确定');/<code>

24小时 制：

<code>var result = showTimePicker(
  context: context,
  initialTime: TimeOfDay.now(),
  builder: (BuildContext context, Widget child) {
    return MediaQuery(
      data: MediaQuery.of(context)
          .copyWith(alwaysUse24HourFormat: true),
      child: child,
    );
  },
);/<code>

黑暗模式

<code>var result = showTimePicker(
  context: context,
  initialTime: TimeOfDay.now(), 

  builder: (BuildContext context, Widget child) {
    return Theme(
      data: ThemeData.dark(),
      child: child,
    );
  },
);/<code>

国际化

在 pubspec.yaml 中引入：

<code>dependencies:
  flutter_localizations:
    sdk: flutter/<code>

在顶级组件 MaterialApp

<code>MaterialApp(
  title: 'Flutter Demo',

  localizationsDelegates: [
    GlobalMaterialLocalizations.delegate,
    GlobalWidgetsLocalizations.delegate,
    GlobalCupertinoLocalizations.delegate,
  ],
  supportedLocales: [
    const Locale('zh'),
    const Locale('en'),
  ],
  .../<code>

弹出时间组件：

<code>RaisedButton(
  child: Text('弹出时间选择器'),
  onPressed: () async {
    var result =
        showTimePicker(context: context, initialTime: TimeOfDay.now());
  },
)/<code>

切换系统语言为中文：

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

<code>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,
    );
  },
);/<code>

iOS风格日期选择器

基础使用

CupertinoDatePicker 是 iOS风格的日期选择器。

<code>class CupertinoDatePickerDemo extends StatefulWidget {
  @override
  _CupertinoDatePickerDemoState createState() => _CupertinoDatePickerDemoState();
}

class _CupertinoDatePickerDemoState extends State<CupertinoDatePickerDemo> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: Container(
          height: 200,
          color: Colors.grey.withOpacity(.5),
          child: CupertinoDatePicker(
            initialDateTime: DateTime.now(),
            onDateTimeChanged: (date) {
              print('$date');
            },
          ),
        ),
      ),
    );
  }

}/<code>

设置最大/小时间：

<code>CupertinoDatePicker(
  initialDateTime: DateTime.now(),
  minimumDate: DateTime.now().add(Duration(days: -1)),
  maximumDate: DateTime.now().add(Duration(days: 1)),
  onDateTimeChanged: (date) {
    print('$date');
  },
)/<code>

最大时间为明天，最小时间为昨天：

设置模式为时间：

<code>CupertinoDatePicker(
  mode: CupertinoDatePickerMode.time,
  initialDateTime: DateTime.now(),
  onDateTimeChanged: (date) {
    print('$date');
  },
)/<code>

设置模式为日期：

<code>CupertinoDatePicker(
  mode: CupertinoDatePickerMode.date,
  initialDateTime: DateTime.now(),
  onDateTimeChanged: (date) {
    print('$date');
  },
)/<code>

设置模式为日期和时间：

<code>CupertinoDatePicker(
  mode: CupertinoDatePickerMode.dateAndTime,
  initialDateTime: DateTime.now(),
  onDateTimeChanged: (date) {
    print('$date');
  },
)/<code>

• time：只显示时间，效果：<code>4 | 14 | PM/<code>
• date：只显示日期，效果：<code>July | 13 | 2012/<code>
• dateAndTime：时间和日期都显示，效果： <code>Fri Jul 13 | 4 | 14 | PM/<code>

使用24小时制：

<code>CupertinoDatePicker(
  use24hFormat: true,
  initialDateTime: DateTime.now(),
  onDateTimeChanged: (date) {
    print('$date');
  },
)/<code>

国际化

在 pubspec.yaml 中引入：

<code>dependencies:
  flutter_localizations:
    sdk: flutter/<code>

在顶级组件 MaterialApp 添加支持：

<code>MaterialApp(
  title: 'Flutter Demo',

  localizationsDelegates: [
    GlobalMaterialLocalizations.delegate,
    GlobalWidgetsLocalizations.delegate,
    GlobalCupertinoLocalizations.delegate,
  ],
  supportedLocales: [
    const Locale('zh'),
    const Locale('en'),
  ],
  .../<code>

组件使用：

<code>CupertinoDatePicker(
  initialDateTime: DateTime.now(),
  onDateTimeChanged: (date) {
    print('$date');
  },
)/<code>

组件语言跟随系统语言，当前系统语言为英文，效果：

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

<code>Localizations(
  locale: Locale('zh'),
  delegates: [
    GlobalMaterialLocalizations.delegate,
    GlobalWidgetsLocalizations.delegate,
    GlobalCupertinoLocalizations.delegate,
  ],
  child: CupertinoDatePicker(
    initialDateTime: DateTime.now(),
    onDateTimeChanged: (date) {
      print('$date');
    },
  ),
)/<code>

iOS风格时间选择器

基础使用

CupertinoTimerPicker 是 iOS风格的时间选择器。

<code>CupertinoTimerPicker(onTimerDurationChanged: (time) {
  print('$time');
})/<code>

设置显示模式：

• CupertinoTimerPickerMode.hm
  ：显示 小时 | 分钟，英文效果<code>16 hours | 14 min/<code>
• CupertinoTimerPickerMode.ms： 显示 分钟 | 秒，英文效果<code>14 min | 43 sec/<code>
• CupertinoTimerPickerMode.hms：显示 小时 | 分钟 | 秒，英文效果<code>16 hours | 14 min | 43 sec/<code>

<code>CupertinoTimerPicker(
    mode: CupertinoTimerPickerMode.hm,
    onTimerDurationChanged: (time) {
      print('$time');
    })/<code>

默认情况下，CupertinoTimerPicker显示0:0:0，设置显示当前时间：

<code>CupertinoTimerPicker(
    initialTimerDuration: Duration(
        hours: DateTime.now().hour,
        minutes: DateTime.now().minute,
        seconds: DateTime.now().second),
    onTimerDurationChanged: (time) {
      print('$time');
    })/<code>

设置 分/秒 的间隔：

<code>CupertinoTimerPicker(
    minuteInterval: 5,
    secondInterval: 5,
    onTimerDurationChanged: (time) {
      print('$time');
    })/<code>

国际化

在 pubspec.yaml 中引入：

<code>dependencies:
  flutter_localizations:
    sdk: flutter/<code>

在顶级组件 MaterialApp 添加支持：

<code>MaterialApp(
  title: 'Flutter Demo',

  localizationsDelegates: [
    GlobalMaterialLocalizations.delegate,
    GlobalWidgetsLocalizations.delegate,
    GlobalCupertinoLocalizations.delegate,
  ],
  supportedLocales: [
    const Locale('zh'),
    const Locale('en'),
  ],
  .../<code>

组件使用：

<code>CupertinoTimerPicker(onTimerDurationChanged: (time) {
  print('$time');
})/<code>

组件语言跟随系统语言，当前系统语言为英文，效果：

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

<code>Localizations(
  locale: Locale('zh'),
  delegates: [
    GlobalMaterialLocalizations.delegate,
    GlobalWidgetsLocalizations.delegate,
    GlobalCupertinoLocalizations.delegate,
  ],
  child: CupertinoTimerPicker(onTimerDurationChanged: (time) {
    print('$time');
  }),
)/<code>

InteractiveViewer

<code>InteractiveViewer(
  child: Image.asset('assets/images/go_board_09x09.png'),
)/<code>

alignPanAxis 参数表示是否只在水平和垂直方向上拖拽，默认为false，设置为true，无法沿着对角线（斜着）方向移动。

<code>InteractiveViewer(
  alignPanAxis: true,
  child: Image.asset('assets/images/go_board_09x09.png'), 

)/<code>

maxScale 、minScale、scaleEnabled 是缩放相关参数，分别表示最大缩放倍数、最小缩放倍数、是否可以缩放：

<code>InteractiveViewer(
  maxScale: 2,
  minScale: 1,
  scaleEnabled: true,
  child: Image.asset('assets/images/go_board_09x09.png'),
)/<code>

如下的案例，子组件为 Table，Table 尺寸大于屏幕，必须将<code>constrained/<code>设置为 false 以便将其绘制为完整尺寸。超出的屏幕尺寸可以平移到视图中。

<code>class InteractiveViewerDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    const int _rowCount = 20;
    const int _columnCount = 10;
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: Container(
          height: 300,
          width: 300,
          child: InteractiveViewer(
            constrained: false,
            child: Table(
              columnWidths: <int, TableColumnWidth>{
                for (int column = 0; column < _columnCount; column += 1)
                  column: const FixedColumnWidth(100.0),
              },
              children: <TableRow>[
                for (int row = 0; row < _rowCount; row += 1)
                  TableRow(
                    children: <Widget>[
                      for (int column = 0; column < _columnCount; column += 1)
                        Container(
                          height: 50,
                          color: row % 2 + column % 2 == 1
                              ? Colors.red
                              : Colors.green,
                        ),
                    ],
                  ),
              ],
            ), 

          ),
        ),
      ),
    );
  }
}/<code>

回调事件：

• onInteractionStart：当用户开始平移或缩放手势时调用。
• onInteractionUpdate：当用户更新组件上的平移或缩放手势时调用。
• onInteractionEnd：当用户在组件上结束平移或缩放手势时调用。

<code>InteractiveViewer(
  child: Image.asset('assets/images/go_board_09x09.png'),
  onInteractionStart: (ScaleStartDetails scaleStartDetails){
    print('onInteractionStart:$scaleStartDetails');
  },
  onInteractionUpdate: (ScaleUpdateDetails scaleUpdateDetails){
    print('onInteractionUpdate:$scaleUpdateDetails');
  },
  onInteractionEnd: (ScaleEndDetails endDetails){
    print('onInteractionEnd:$endDetails');
  },
)/<code>

通过 Matrix4 矩阵对其进行变换，比如左移、放大等，添加变换控制器：

<code>final TransformationController _transformationController =
      TransformationController();

InteractiveViewer(
  child: Image.asset('assets/images/go_board_09x09.png'),
  transformationController: _transformationController,
)/<code>

放大变换：

<code>var matrix = _transformationController.value.clone();
matrix.scale(1.5, 1.0, 1.0);
_transformationController.value = matrix;/<code>

完整代码：

<code>import 'dart:math';

import 'package:flutter/material.dart';

///
/// desc: 

///

class InteractiveViewerDemo extends StatefulWidget {
  @override
  _InteractiveViewerDemoState createState() => _InteractiveViewerDemoState();
}

class _InteractiveViewerDemoState extends State<InteractiveViewerDemo> {
  final TransformationController _transformationController =
      TransformationController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Column(
        children: [
          Container(
            padding: EdgeInsets.symmetric(horizontal: 10.0),
            child: Center(
              child: InteractiveViewer(
                child: Image.asset('assets/images/go_board_09x09.png'),
                transformationController: _transformationController,
              ),
            ),
          ),
          Expanded(
            child: Container(),
          ),
          Row(
            children: [
              RaisedButton(
                child: Text('重置'),
                onPressed: () {
                  _transformationController.value = Matrix4.identity();
                },
              ),
              RaisedButton(
                child: Text('左移'),
                onPressed: () {
                  var matrix = _transformationController.value.clone();
                  matrix.translate(-5.0);
                  _transformationController.value = matrix;
                },
              ),
              RaisedButton(
                child: Text('放大'),
                onPressed: () {
                  var matrix = _transformationController.value.clone();
                  matrix.scale(1.5, 1.0, 1.0); 

                  _transformationController.value = matrix;
                },
              ),
            ],
          ),
        ],
      ),
    );
  }
}/<code>

交流

老孟Flutter博客地址（330个控件用法）：http://laomengit.com

欢迎加入Flutter交流群（微信：laomengit）、关注公众号【老孟Flutter】

閱讀更多 老孟程序員 的文章

關鍵字: 老孟 设计 导读