第二百三十二回

2023-12-28 00:11:36


我们在上一章回中介绍了"自定义TimePicker组件"相关的内容,本章回中将继续介绍该组件.闲话休提,让我们一起Talk Flutter吧。

1. 概念介绍

我们在上一章回是介绍了中如何自定义TimePicker组件,不过该组件单独显示的话不太方便,比如官方的TimePicke就是通过对话框形式弹出来的,我们也可以把该
组件通过对话框显示出来,不过我感觉还是使用IOS上的模态窗口显示效果比较好,在Flutter中这个窗口叫BottomSheet,它是一种弹出式窗口,从屏幕的最下方弹出
来,我们在前面章回中介绍过该组件。我们将在本章回中介绍如何使用BottomSheet来显示自定义的TimePicker组件。

2. 实现方法

  • 创建一个显示时间的组件,它上面显示的时间就是用户在自定义的TimePicker中选择的时间;
  • 给上一步中创建的时间组件添加事件响应方法,用来响应用户发出的点击事件;
  • 在点击事件中弹出BottomSheet窗口,把自定义的TimePicker组件放到该窗口中;
  • 实现时间选择功能,就是把用户在TimePicker中选择的时间显示到时间组件上;
  • 关闭BottomSheet窗口,可以专门创建一个按钮来关闭或者点击窗口外的区域来关闭;
    上面介绍的方法比较抽象,我们将在后面的小节中通过具体的示例代码来演示。

3. 代码与效果

3.1 示例代码

class _ExCusTimePickerState extends State<ExCusTimePicker> {
  ///这是初始化值,如果用户不选择就用此值l
  int hour = 8;
  int minute = 30;
  String selectedTime = "8:30";
  
  
  Widget build(BuildContext context) {
    double screenWidth = MediaQuery.of(context).size.width;
    double screenHeight = MediaQuery.of(context).size.height;
    
    return Scaffold(
      appBar: AppBar(
        title: const Text("Example of CusTimePicker"),
      ),
      body:Listener(
        onPointerDown: (event) {
          showModalBottomSheet(
              context: context,
              builder: (BuildContext context){

                return Container(
                  width: screenWidth,
                  height: screenHeight*2/3,
                  decoration: const BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.horizontal(left: Radius.circular(30),right: Radius.circular(30),),
                  ),
                  ///在这里使用自定义的TimePicker组件
                  child:CusTimePicker(),
       ///显示时间的组件分三行内容
        child: Align(
          alignment: Alignment.topCenter,
          child: Container(
            alignment: Alignment.center,
            width: screenWidth - 16*2,
            height: 96,
            decoration: BoxDecoration(
              color: Colors.blue[500],
              borderRadius: BorderRadius.circular(24),
            ),
            child: Padding(
              padding: const EdgeInsets.only(left: 16.0,top: 8,),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  const Text("SelectedTime: ",style: TextStyle(color: Colors.white),),
                  const SizedBox(height: 16,),
                  Text(selectedTime,style: const TextStyle(fontSize: 24,color: Colors.white),),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }

上面的示例代码完全按照实现方法中的内容来编写,并且在关键位置添加了注释。代码中需要注意的是用户点击事件响应和更新时间的方法。在更新时间时我们使用的是
setState()方法,这样可以实时更新显示时间组件中的时间,不过就是性能低一些。可以把它更新成StreamBuiler的方式来更新,这个就当是我给大家留下的作业。
此外,代码中默认的时间是自定义的,大家可以修改当前的系统时间,这样可以提升用户的操作检验。

3.2 运行效果

编译并且运行上面的程序,可以得到下面的运行效果图,请大家参考:035.图中位于屏幕最上的组件就是显示时间的组件,点击该组件时就会弹出下面的窗口,这个窗口
就是BottomSheet,我们把自定义的TimePicker组件放到了该窗口中,并且在窗口下方添加了一个按钮用来确认选择的时间,点击该按钮后关闭窗口。这个图片是静态
的,大家可以自动动手去实践,这样可以看到容器动态弹出和关闭的过程。

4. 内容总结

最后,我们对本章回的内容做一个全面的总结:

  • 我们使用单独的组件来显示时间,而且它可以响应用户点击的事件;
  • 用户点击组件后弹出BottomSheet窗口,在该窗口中显示TimePicker组件;
  • 选择完成时间后需要更新组件中显示的日间,并且关闭BottomSheet窗口;
  • 更新时间时可以使用setState()方法,也可以使用StreaBuilder组件;
    看官们,与"自定义TimePicker组件"相关的内容就介绍到这里,欢迎大家在评论区交流与讨论!

文章来源:https://blog.csdn.net/talk_8/article/details/135257833
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。