Flutter常用Widget详解

Posted 2021-04-29 Flutter编程指南

前言

相信不少同学已经通过线上直播观看了本周Google举办的Flutter Live 2018，在本次活动中Google正式发布了Flutter 1.0版本，这对于正在学习Flutter或已经使用Flutter进行应用开发的我们都是一个好消息，1.0版本中增加了一些新的特性，并且是目前最稳定的版本，没有了解本次活动内容的同学可以通过如下链接查看。

话不多说，下面我们进入本篇主题。上一篇文章给大家分享了一部分Flutter日常开发中常用的Widget和其属性的使用介绍，其中包括文本、图片、按钮、输入控件和选择控件等，这些都是应用开发中最基本的UI展示控件，接下来我们将继续向大家详细介绍其他一些常用Widget。

常用Widget介绍

日期、时间选择器和通用选择器

选择器对应的Widget在Flutter中也有两种风格的实现，具体用法和使用例子如下。

Material design风格的日期选择器

showDatePicker(
  context: context,
  initialDate: DateTime.parse("20181209"), //初始选中日期
  firstDate: DateTime.parse("20181109"), //可选日期范围第一个日期
  lastDate: DateTime.parse("20190109"), //可选日期范围最后一个日期
  selectableDayPredicate: (dateTime) { //通过此方法可以过滤掉可选范围内不可选的特定日期
    if(dateTime.day == 10 || dateTime.day == 20 || dateTime.day == 30) {
      //此处表示10号、20号、30号不可选
      return false;
    }
    return true;
  },
  initialDatePickerMode: DatePickerMode.day, //初始化选择模式，有day和year两种
).then((dateTime) { //选择日期后点击OK拿到的日期结果
  print('当前选择了：${dateTime.year}年${dateTime.month}月${dateTime.day}日');
});

显示效果如下图： 

Material design风格的时间选择器

showTimePicker(
  context: context,
  initialTime: TimeOfDay.now(), //初始化显示时间
).then((timeOfDay) { //选择时间后点击OK拿到的时间结果
  if(timeOfDay == null) {
    return;
  }
  print('当前选择了：${timeOfDay.hour}时${timeOfDay.minute}分');
});

显示效果如下图： 

Cupertino风格的日期选择器CupertinoDatePicker

CupertinoDatePicker(
  mode: CupertinoDatePickerMode.date, //日期时间模式，此处为日期模式
  onDateTimeChanged: (dateTime) { //日期改变时调用的方法
    if (dateTime == null) {
      return;
    }
    print('当前选择了：${dateTime.year}年${dateTime.month}月${dateTime.day}日');
  },
  initialDateTime: DateTime.now(), //初始化展示时的日期时间
  minimumYear: 2018, //最小年份，只有mode为date时有效
  maximumYear: 2019, //最大年份，只有mode为date时有效
),

CupertinoDatePicker(
  mode: CupertinoDatePickerMode.dateAndTime, //日期时间模式，此处为日期和时间模式
  onDateTimeChanged: (dateTime) {
    if (dateTime == null) {
      return;
    }
    print('当前选择了：${dateTime.year}年${dateTime.month}月${dateTime.day}日 ${dateTime.hour}时${dateTime.minute}分${dateTime.second}秒');
  },
  initialDateTime: DateTime.now(),
  minimumDate: DateTime.parse("20181109"), //最小日期时间，只有mode为dateAndTime时有效
  maximumDate: DateTime.parse("20190109"), //最大日期时间，只有mode为dateAndTime时有效
  use24hFormat: false, // 是否使用24小时格式，此处不使用，则选择时可以选择AM和PM值
),

CupertinoDatePicker(
  mode: CupertinoDatePickerMode.time, //日期时间模式，此处为时间模式
  onDateTimeChanged: (dateTime) {
    if (dateTime == null) {
      return;
    }
    print('当前选择了：${dateTime.hour}时${dateTime.minute}分${dateTime.second}秒');
  },
  initialDateTime: DateTime.now(),
  use24hFormat: true, // 是否使用24小时格式，此处使用
),

显示效果如下图： 

Cupertino风格的时间选择器CupertinoTimerPicker

CupertinoTimerPicker(
  mode: CupertinoTimerPickerMode.hms, //可以设置时分、时分秒和分秒三种模式
  initialTimerDuration: Duration(hours: 1, minutes: 35, seconds: 50), // 默认显示的时间值
  minuteInterval: 5, // 分值间隔，必须能够被initialTimerDuration.inMinutes整除
  secondInterval: 10, // 秒值间隔，必须能够被initialTimerDuration.inSeconds整除，此时设置为10，则选择项为0、10、20、30、40、50六个值
  onTimerDurationChanged: (duration) {
    print('当前选择了：${duration.inHours}时${duration.inMinutes-duration.inHours*60}分${duration.inSeconds-duration.inMinutes*60}秒');
  },
)

显示效果如下图： 

Cupertino风格的通用选择器CupertinoPicker

CupertinoPicker(
  backgroundColor: Colors.white, //选择器背景色
  itemExtent: 30, //item的高度
  onSelectedItemChanged: (index) { //选中item的位置索引
    print("index = $index}");
  },
  children: <Widget>[ //所有的选择项
    Text('Apple'),
    Text('Banana'),
    Text('Orange'),
  ],
)

显示效果如下图： 

常用弹框和信息提示浮层

常见的弹框主要包含Material design风格的SimpleDialog、AlertDialog、BottomSheet等，和Cupertino风格的CupertinoDialog、CupertinoAlertDialog、CupertinoActionSheet等。

SimppleDialog和AlertDialog

SimpleDialog和AlertDialog本身都是一个Widget，使用时需要通过showDialog方法来展示。

// 展示SimpleDialog
showDialog( //展示Dialog的方法
  context: context,
  builder: (context) {
    return SimpleDialog(
      title: Text('评价一下'), //标题
      titlePadding: EdgeInsets.all(20), //标题的padding值
      children: <Widget>[ //弹框中的选项
        SimpleDialogOption( //每一个选项都是一个SimpleDialogOption Widget
          onPressed: (){
            print('给个好评');
            Navigator.pop(context);
          },
          child: Text('给好评'), //选项提示文案
        ),
        SimpleDialogOption(
          onPressed: (){
            print('残忍拒绝');
            Navigator.pop(context);
          },
          child: Text('残忍拒绝'),
        ),
        SimpleDialogOption(
          onPressed: (){
            print('我有意见');
            Navigator.pop(context);
          },
          child: Text('我有意见'),
        ),
      ],
      contentPadding: EdgeInsets.all(0),
    );
  },
);

//展示AlertDialog
showDialog(
  context: context,
  builder: (context) {
    return AlertDialog(
      title: Text('提示'), //标题
      titlePadding: EdgeInsets.all(20), //标题的padding值
      content: Text('是否想放弃学习Flutter'), //弹框展示主要内容
      contentPadding: EdgeInsets.only(left: 20, right: 20), //内容的padding值
      actions: <Widget>[ //操作按钮数组
        FlatButton(
          onPressed: () {
            print("取消");
            Navigator.pop(context);
          },
          child: Text('取消'),
        ),
        FlatButton(
          onPressed: () {
            print('确定');
            Navigator.pop(context);
          },
          child: Text('确定'),
        ),
      ],
    );
  },
);

显示效果如下图： 

持久性BottomSheet和模态BottomSheet

BottomSheet一般不会直接创建，通常是通过ScaffoldState.showBottomSheet方法来创建持久性BottomSheet，通过showModalBottomSheet方法来创建模态BottomSheet。

// 创建持久性BottomSheet
final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
@override
Widget build(BuildContext context) {
  return Scaffold(
    key: _scaffoldKey, //设置key值以便获取ScaffoldState
    appBar: AppBar(
      title: Text(widget.title),
    ),
    body: _buildBottomSheet(context)
  );
}

Widget _buildBottomSheet(BuildContext context) {
  return Container(
    child: RaisedButton(
        child: Text("BottomSheet"),
        onPressed: () {
          print("弹出BottomSheet");
          //通过获取当前ScaffoldState来展示BottomSheet
          _scaffoldKey.currentState.showBottomSheet<void>((context){
            return Container(
                decoration: BoxDecoration(
                    border: Border(top: BorderSide(color: Colors.grey))
                ),
                child: Padding(
                    padding: const EdgeInsets.all(20),
                    child: Text('This is a Material persistent bottom sheet. Drag downwards to dismiss it.',
                        textAlign: TextAlign.center,
                        style: TextStyle(
                            color: Colors.blueAccent,
                            fontSize: 22
                        )
                    )
                )
            );
          });
        }
    ),
  );
}

//创建模态BottomSheet
Widget _buildModalBottomSheet(BuildContext context) {
  return Container(
      child: RaisedButton(
          child: Text("ModalBottomSheet"),
          onPressed: () {
            print("ModalBottomSheet");
            //直接使用showModalBottomSheet方法创建模态BottomSheet
            showModalBottomSheet(
              context: context,
              builder: (context) {
                return Container(
                    decoration: BoxDecoration(
                        border: Border(top: BorderSide(color: Colors.grey))
                    ),
                    child: Padding(
                        padding: const EdgeInsets.all(20),
                        child: Text('This is a Material modal bottom sheet. Drag downwards to dismiss it.',
                            textAlign: TextAlign.center,
                            style: TextStyle(
                                color: Colors.blueAccent,
                                fontSize: 22
                            )
                        )
                    )
                );
              },
            );
          }
      )
  );
}

显示效果如下图： 

CupertinoAlertDialog

由于CupertinoDialog已经被标记为过时的Widget，这里就只介绍CupertinoAlertDialog的用法。

showDialog( //通过showDialog方法展示alert弹框
  context: context,
  builder: (context) {
    return CupertinoAlertDialog(
      title: Text('提示'), //弹框标题
      content: Text('是否想放弃学习Flutter'), //弹框内容
      actions: <Widget>[ //操作控件
        CupertinoDialogAction(
          onPressed: () { //控件点击监听
            print("我不会放弃的");
            Navigator.pop(context);
          },
          textStyle: TextStyle(fontSize: 18, color: Colors.blueAccent), //按钮上的文本风格
          child: Text('取消'), //控件显示内容
        ),
        CupertinoDialogAction(
          onPressed: () {
            print("我投降");
            Navigator.pop(context);
          },
          textStyle: TextStyle(fontSize: 18, color: Colors.grey),
          child: Text('确定'),
        ),
      ],
    );
  },
);

显示效果如下图： 

CupertinoActionSheet

该Widget通常作为子Widget传递给showCupertinoModalPopup方法，由该方法将其通过从屏幕底部向上滑动来显示。

showCupertinoModalPopup(
  context: context,
  builder: (context) {
    return CupertinoActionSheet(
      title: Text('提示', style: TextStyle(fontSize: 22),), //标题
      message: Text('麻烦抽出几分钟对该软件进行评价，谢谢!'), //提示内容
      actions: <Widget>[ //操作按钮集合
        CupertinoActionSheetAction(
          onPressed: (){
            Navigator.pop(context);
          },
          child: Text('给个好评'),
        ),
        CupertinoActionSheetAction(
          onPressed: (){
            Navigator.pop(context);
          },
          child: Text('我要吐槽'),
        ),
      ],
      cancelButton: CupertinoActionSheetAction( //取消按钮
        onPressed: () {
          Navigator.pop(context);
        },
        child: Text('取消'),
      ),
    );
  },
);

显示效果如下图： 

导航栏和标签栏

导航栏和标签栏是页面框架搭建常用的控件，Flutter中主要包含的对应Widget有Material design风格的BottomNavigationBar、Tabbar和Cupertino风格的CupertinoNavigationBar、CupertinoTabBar等等。

BottomNavigationBar

该Widget通常在Material design风格的页面框架Widget Scaffold中使用，作为Scaffold的一个bottomNavigationBar属性值。具体使用方法如下：

  int selectedIndex = 1;
  final widgetOptions = [
    Text('This is Home Page'),
    Text('This is Product Page'),
    Text('This is More Page'),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar( //应用栏
        title: Text(widget.title),
      ),
      body: widgetOptions[selectedIndex], //页面内容
      bottomNavigationBar: BottomNavigationBar( //底部导航栏
        items: <BottomNavigationBarItem>[ //导航栏选项集合
          BottomNavigationBarItem( //底部单个导航栏选项
            icon: Icon(Icons.home), //图标
            title: Text('首页'), //标题
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.list),
            title: Text('产品'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.more_horiz),
            title: Text('更多'),
          ),
        ],
        currentIndex: selectedIndex, //当前导航栏选中的索引
        fixedColor: Colors.redAccent, //选中项的标题颜色
        onTap: (index) { //导航栏项点击后的处理方法
          setState(() {
            selectedIndex = index;
          });
        },
      ),
    );
  }

Tabbar

Tabbar通常创建为AppBar的AppBar.bottom部分，使用方式如下：

  TabController _controller;
  int _selectedIndex = 0;
  final List<Widget> _tabViews = [
    Container(
      child: Text('This is hot page'),
    ),
    Container(
      child: Text('This is tech page'),
    ),
    Container(
      child: Text('This is financial page'),
    ),
  ];
  final List<Tab> _tabs = [
    Tab(
      text: '热门', //标题，和child不能同时存在，只能设置一个
//      child: Text('热门'), //标题，和text不能同时存在
      icon: Icon(Icons.home), //标题对应的图标
    ),
    Tab(
      text: '科技',
//      child: Text('科技'),
      icon: Icon(Icons.list),
    ),
    Tab(
      text: '金融',
//      child: Text('金融'),
      icon: Icon(Icons.more),
    ),
  ];

  @override
  void initState() {
    super.initState();
    _controller = TabController(vsync: this, length: _tabs.length);
    _controller.addListener(_handleTabSelection);
  }

  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
    _controller.dispose();
  }

  void _handleTabSelection() {
    setState(() {
      _selectedIndex = _controller.index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar( //应用栏
        title: Text(widget.title),
        bottom: TabBar(
          controller: _controller, //TabBar控制器，通过给controller对象添加addListener方法来监听切换动作
          tabs: _tabs, //标签栏显示项集合
        ),
      ),
      body: _tabViews[_selectedIndex], //页面显示的内容
    );
  }

BottomNavigationBar和Tabbar显示效果如下图： 

CupertinoNavigationBar

Cupertino风格的顶部导航栏，通常与CupertinoPageScaffold一起使用。

CupertinoPageScaffold(
  navigationBar: CupertinoNavigationBar(
    middle: Center(child: Text('详情', style: TextStyle(color: Colors.white),),), //导航栏中间控件
    leading: Icon(Icons.arrow_back_ios, size: 18,), //导航栏左边控件
    trailing: Text('退出'), //导航栏右边控件
    backgroundColor: Colors.blueAccent, //导航栏背景颜色
    actionsForegroundColor: Colors.white, //leading和trailing图标或文本颜色
  ),
  child: SafeArea(
    top: false,
    bottom: false,
    child: Container(
      child: Text('This is a cupertino style page', style: TextStyle(fontSize: 16, color: Colors.black),),
    ),
  ),
);

CupertinoTabBar

Cupertino风格的标签栏，通常与CupertinoTabScaffold一起使用，作为CupertinoTabScaffold的tabBar属性值。具体使用方法如下：

  final List<String> _titles = ['首页', '产品', '更多'];
  final List<Text> _pageContents = [Text('This is Home page'), Text('This is Product page'), Text('This is More page')];
  int _selectedIndex = 0;

  @override
  Widget build(BuildContext context) {
    return CupertinoTabScaffold(
      tabBar: CupertinoTabBar( //作为整个页面框架的底部标签栏
        currentIndex: _selectedIndex, //当前定位的索引
        onTap: (index) { //点击标签栏的事件监听方法
          setState(() {
            _selectedIndex = index;
          });
        },
        items: <BottomNavigationBarItem> [ //标签栏项集合
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text(_titles[0]),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.list),
            title: Text(_titles[1]),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.more_horiz),
            title: Text(_titles[2]),
          ),
        ],
      ),
      tabBuilder: (BuildContext context, int index) { //标签栏对应的页面创建
        return CupertinoTabView(
          builder: (BuildContext context) {
            return CupertinoPageScaffold(
              navigationBar: CupertinoNavigationBar(
                middle: Text(_titles[index]),
              ),
              child: Center(
                child: _pageContents[index],
              ),
            );
          },
        );
      },
    );
  }

CupertinoNavigationBar和CupertinoTabBar显示效果如下图： 

总结

本篇我们对Flutter开发中常见的选择器、弹框和标题栏、标签栏进行了介绍，相信大家通过阅读例子代码已经有了一个直观的了解，后续我们将继续介绍常用Widget之布局Widget，敬请期待。