【Flutter】Dialog组件PageView组件

2024-05-27 14:52
文章标签 组件 flutter dialog pageview

本文主要是介绍【Flutter】Dialog组件PageView组件，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

🔥 本文由 程序喵正在路上 原创，CSDN首发！
💖 系列专栏：Flutter学习
🌠 首发时间：2024年5月27日
🦋 欢迎关注🖱点赞👍收藏🌟留言🐾

目录

  • Dialog组件
    • AlertDialog和SimpleDialog
    • 底部弹出框showModalBottomSheet
    • Fluttertoast
    • 自定义Dailog
  • PageView组件
    • PageView的使用
    • PageView.builder
    • PageView上拉无限加载的实现思路
    • PageView实现无限轮播图
    • 定时器
    • 定时器加PageController实现动态轮播图

Dialog组件

AlertDialog和SimpleDialog

AlertDialog 和 SimpleDialog 都必须在 showDialog 组件中使用，而且 SimpleDialog 中的选项需要使用 SimpleDialogOption 组件来定义。

我们新建一个页面 dialog.dart 专门来演示与弹出框有关的组件，其内容如下，记得将其添加到路由中：

import 'package:flutter/material.dart';class DialogPage extends StatefulWidget {const DialogPage({super.key});@overrideState<DialogPage> createState() => _DialogPageState();
}class _DialogPageState extends State<DialogPage> {void _alertDialog() async {var result = await showDialog(barrierDismissible: false, //表示点击灰色背景的时候是否消失弹出框context: context,builder: (context) {return AlertDialog(title: const Text("提示信息!"),content: const Text("您确定要删除吗"),actions: [TextButton(onPressed: () {Navigator.of(context).pop("确定"); //点击按钮让AlertDialog消失, 同时返回“确定”},child: const Text("确定")),TextButton(onPressed: () {Navigator.of(context).pop("取消");},child: const Text("取消"))],);});print(result);}void _simpleDialog() async {var result = await showDialog(barrierDismissible: false, //表示点击灰色背景的时候是否消失弹出框context: context,builder: (context) {return SimpleDialog(title: const Text("请选择语言"),children: [SimpleDialogOption(onPressed: () {Navigator.pop(context, "汉语");},child: const Text("汉语"),),const Divider(),SimpleDialogOption(onPressed: () {Navigator.pop(context, "英语");},child: const Text("英语"),),const Divider(),SimpleDialogOption(onPressed: () {Navigator.pop(context, "日语");},child: const Text("日语"),),const Divider(),],);});print(result);}void _modelBottomSheet() async {}void _toast() {}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text("Dialog"),),body: Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: [ElevatedButton(onPressed: _alertDialog,child: const Text('alert弹出框-AlertDialog '),),const SizedBox(height: 20),ElevatedButton(onPressed: _simpleDialog,child: const Text('select弹出框-SimpleDialog'),),const SizedBox(height: 20),ElevatedButton(onPressed: _modelBottomSheet,child: const Text('ActionSheet底部弹出框'),),const SizedBox(height: 20),ElevatedButton(onPressed: _toast,child: const Text('Toast'),),// fluttertoast],),),);}
}

由于 showDialog 的返回类型为 Future，为了接收弹出框的返回信息，我们需要在函数后面加上 async，在 前面加上 await，并用一个变量 result 来接收。

顺便说一下 showDialog 中的 barrierDismissible 参数，所谓的灰色背景指的是屏幕中除了弹出框以外的地方。

在 home.dart 中，我们简单写了一个按钮，可以让页面跳转到 dialog.dart：

import 'package:flutter/material.dart';class HomePage extends StatefulWidget {const HomePage({super.key});@overrideState<HomePage> createState() => _HomePageState();
}class _HomePageState extends State<HomePage> {@overrideWidget build(BuildContext context) {return Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: [ElevatedButton(onPressed: () {Navigator.pushNamed(context, "/dialog");},child: const Text("Dialog测试"),),],),);}
}

效果：

在这里插入图片描述

在这里插入图片描述

底部弹出框showModalBottomSheet

为了减小代码篇幅，下面只给出缺少的函数。

如果你想修改底部弹出框的高度，建议在其外部套上一个 Container 或者 SizedBox。

void _modelBottomSheet() async {var result = await showModalBottomSheet(context: context,builder: (context) {return SizedBox(height: 240,child: Column(crossAxisAlignment: CrossAxisAlignment.center,children: [ListTile(title: const Text("分享"),onTap: () {Navigator.of(context).pop("分享");},),const Divider(),ListTile(title: const Text("收藏"),onTap: () {Navigator.of(context).pop("收藏");},),const Divider(),ListTile(title: const Text("取消"),onTap: () {Navigator.of(context).pop("取消");},),const Divider(),],),);});print(result);
}

效果：

在这里插入图片描述

Fluttertoast

如果你想实现屏幕上弹出一个提示信息，然后几秒后自动消失的效果，Flutter 中并没有这样的内置组件。这个时候我们可以使用一个第三方插件 —— Fluttertoast。

在 https://pub-web.flutter-io.cn/ 中搜索 fluttertoast 即可找到它，按照其使用手册即可轻松上手。

在这里插入图片描述

在 Readme 页面下滑，即可看到使用教程，非常简单，我们只要会复制粘贴即可：

在这里插入图片描述

记得引入 fluttertoast

void _toast() {Fluttertoast.showToast(msg: "提示信息",toastLength: Toast.LENGTH_LONG, //提示时间,只对android生效gravity: ToastGravity.CENTER, //出现位置timeInSecForIosWeb: 1, //提示时间,只对ios和web生效backgroundColor: Colors.black,textColor: Colors.white,fontSize: 16,);
}

在引入第三方插件后，记得重启项目，不能热加载，效果：

在这里插入图片描述

自定义Dailog

自定义 Dialog 对象，需要继承 Dialog 类，尽管 Dialog 提供了 child 参数可以用来写视图界面，但是往往会达不到我们想要的效果，因为默认的 Dialog 背景框是满屏的，不符合弹出框的特点。如果我们想完全定义界面，就需要重写 build 函数。

  1. 新建自定义组件 myDialog.dart

    InkWell 组件是 Flutter 中的一个特殊的交互式组件，它提供了水波纹效果和触摸事件处理能力。当用户点击 InkWell 组件时，它会显示一个水波纹动画效果，以指示用户的交互。除了点击事件外，InkWell 组件还可以处理其他手势事件，如长按、双击等。InkWell 通常用于包装其他可点击的组件，如按钮或列表项，以增强用户交互体验。

    import 'package:flutter/material.dart';class MyDialog extends Dialog {final String title; //标题final String content; //内容final Function()? onTap; //方便我们在外部获取其返回值const MyDialog({super.key,required this.title,required this.content,required this.onTap});@overrideWidget build(BuildContext context) {return Material(type: MaterialType.transparency, //设置背景透明child: Center(//包裹在Center组件中，不然会全屏child: Container(height: 240,width: 240,color: Colors.white,child: Column(children: [Padding(padding: const EdgeInsets.all(5),child: Stack(children: [Align(alignment: Alignment.centerLeft,child: Text(title,style: const TextStyle(fontSize: 18),),),Align(alignment: Alignment.centerRight,child: InkWell(onTap: onTap,child: const Icon(Icons.close),),)],),),const Divider(),Container(padding: const EdgeInsets.all(10),width: double.infinity,child: Text(content, style: const TextStyle(fontSize: 14)),)],),),),);}
}

  2. 定义一个按钮，调用 MyDialog

    void _myDialog() async {var result = await showDialog(context: context,builder: (context) {return MyDialog(title: "提示!",content: "我是一个内容",onTap: () {Navigator.of(context).pop("自定义Dialog关闭");},);});print(result);
}

  3. 效果

    在这里插入图片描述

PageView组件

Flutter 中的轮动图以及抖音上下滑页切换视频功能等等，这些都可以通过 PageView 轻松实现。

PageView 常见属性：

属性描述
scrollDirection默认为 Axis.horizontal：水平方法；Axis.vertical：垂直方向
children配置子元素
allowImplicitScrolling缓存当前页面的前后两页
onPageChangedpage改变的时候触发

PageView的使用

写一个 pageView.dart：

import 'package:flutter/material.dart';class PageViewPage extends StatefulWidget {const PageViewPage({super.key});@overrideState<PageViewPage> createState() => _PageViewPageState();
}class _PageViewPageState extends State<PageViewPage> {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text("PageView"),),body: PageView(scrollDirection: Axis.vertical,children: [Center(child:Text("第1屏", style: Theme.of(context).textTheme.headlineLarge),),Center(child:Text("第2屏", style: Theme.of(context).textTheme.headlineLarge),),Center(child:Text("第3屏", style: Theme.of(context).textTheme.headlineLarge),),Center(child:Text("第4屏", style: Theme.of(context).textTheme.headlineLarge),),Center(child:Text("第5屏", style: Theme.of(context).textTheme.headlineLarge),),],),);}
}

然后将其写在路由中，再在 home.dart 添加一个按钮用来跳转，效果就是可以上下滑动切换页面：

在这里插入图片描述

在这里插入图片描述

PageView.builder

PageView.builder 同理

import 'package:flutter/material.dart';class PageViewBuilderPage extends StatefulWidget {const PageViewBuilderPage({super.key});@overrideState<PageViewBuilderPage> createState() => _PageViewBuilderPageState();
}class _PageViewBuilderPageState extends State<PageViewBuilderPage> {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text("pageViewBuilder"),),body: PageView.builder(scrollDirection: Axis.vertical,itemCount: 6, //页数itemBuilder: (context, index) {return Center(child: Text("第$index屏",style: Theme.of(context).textTheme.headlineLarge));}),);}
}

在这里插入图片描述

PageView上拉无限加载的实现思路

新建 pageViewFullPage.dart：

import 'package:flutter/material.dart';class PageViewFullPage extends StatefulWidget {const PageViewFullPage({super.key});@overrideState<PageViewFullPage> createState() => _PageViewFullPageState();
}class _PageViewFullPageState extends State<PageViewFullPage> {final List<Widget> _list = [];@overridevoid initState() {super.initState();for (var i = 0; i < 10; i++) {_list.add(MyPage(text: "第${i + 1}屏"));}}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text("pageview无限加载"),),body: PageView(scrollDirection: Axis.vertical, // 滑动方向为垂直方向onPageChanged: (index) {//当页面快加载完时, 继续添加页面if (index + 2 == _list.length) {setState(() {for (var i = 0; i < 10; i++) {_list.add(MyPage(text: "第${i + 1}屏"));}});}},children: _list,));}
}class MyPage extends StatefulWidget {final String text;const MyPage({super.key, required this.text});@overrideState<MyPage> createState() => _MyPageState();
}class _MyPageState extends State<MyPage> {@overrideWidget build(BuildContext context) {return Center(child:Text(widget.text, style: Theme.of(context).textTheme.headlineLarge),);}
}

无限加载的效果就是，当我们上滑到第10屏后，再下滑就会回到第1屏

PageView实现无限轮播图

实现如下效果，有三张图片可以左右一直滑动，同时图片下方有圆点跟随移动：

在这里插入图片描述

新建 pageViewSwiper.dart：

import 'package:flutter/material.dart';class PageViewSwiperPage extends StatefulWidget {const PageViewSwiperPage({super.key});@overrideState<PageViewSwiperPage> createState() => _PageViewSwiperPageState();
}class _PageViewSwiperPageState extends State<PageViewSwiperPage> {List<Widget> list = [];int _currentIndex = 0;@overridevoid initState() {super.initState();list = const [ImagePage(src: "https://xixi-web-tlias.oss-cn-guangzhou.aliyuncs.com/1.jpg"),ImagePage(src: "https://xixi-web-tlias.oss-cn-guangzhou.aliyuncs.com/2.jpg"),ImagePage(src: "https://xixi-web-tlias.oss-cn-guangzhou.aliyuncs.com/3.jpg"),];}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text('PageView无限轮播图'),),body: Stack(children: [SizedBox(height: 200,child: PageView.builder(onPageChanged: (index) {setState(() {_currentIndex = index % list.length;});},itemCount: 1000,itemBuilder: (context, index) {return list[index % list.length];}),),Positioned(left: 0,right: 0, //设置left:0,right:0就会占满整行bottom: 2,child: Row(mainAxisAlignment: MainAxisAlignment.center,children: List.generate(list.length, (index) {return Container(margin: const EdgeInsets.all(5),width: 10,height: 10,decoration: BoxDecoration(//图标下标和圆点下标一致时，圆点显示为蓝色; 否则为灰色color: _currentIndex == index ? Colors.blue : Colors.grey,shape: BoxShape.circle //圆),);}).toList(),),)],),);}
}class ImagePage extends StatefulWidget {final double height; //图片高度final double width; //图片宽度final String src; //图片地址const ImagePage({super.key,this.height = 200,this.width = double.infinity,required this.src});@overrideState<ImagePage> createState() => _ImagePageState();
}class _ImagePageState extends State<ImagePage> {@overrideWidget build(BuildContext context) {return SizedBox(height: widget.height,width: widget.width,child: Image.network(widget.src),);}
}

定时器

我们可以使用 Timer.periodic() 来创建定时器，需要导包：

import 'dart:async';

//创建定时器, 3秒
var timer = Timer.periodic(const Duration(seconds: 3), (t) {print('afterTimer=' + DateTime.now().toString());
});

组件销毁的时候取消定时器：

void dispose() {super.dispose();timer.cancel();
}

定时器加PageController实现动态轮播图

我们将前面实现的轮播图抽离出来，方便我们实现轮播图，同时加上定时器，让其定时切换页面，实现动态轮播图的效果。

抽离为 swiper.dart：

import 'dart:async';
import 'package:flutter/material.dart';class Swiper extends StatefulWidget {final double width;final double height;final List<String> list; //页面信息列表const Swiper({super.key,this.height = 200,this.width = double.infinity,required this.list});@overrideState<Swiper> createState() => _SwiperState();
}class _SwiperState extends State<Swiper> {int _currentIndex = 0;List<Widget> pageList = []; //页面列表late PageController _pageController;late Timer timer;@overridevoid initState() {super.initState();//数据for (var i = 0; i < widget.list.length; i++) {pageList.add(ImagePage(width: widget.width, height: widget.height, src: widget.list[i]));}//PageController, 默认显示第一页_pageController = PageController(initialPage: 0);//定时器timer = Timer.periodic(const Duration(seconds: 3), (t) {//进行页面切换_pageController.animateToPage((_currentIndex + 1) % pageList.length,duration: const Duration(milliseconds: 300), curve: Curves.linear);});}@overridevoid dispose() {super.dispose();timer.cancel();_pageController.dispose();}@overrideWidget build(BuildContext context) {return Stack(children: [SizedBox(height: 200,child: PageView.builder(controller: _pageController,onPageChanged: (index) {setState(() {_currentIndex = index % pageList.length;});},itemCount: 1000,itemBuilder: (context, index) {return pageList[index % pageList.length];}),),Positioned(left: 0,right: 0,bottom: 2,child: Row(mainAxisAlignment: MainAxisAlignment.center,children: List.generate(pageList.length, (index) {return Container(margin: const EdgeInsets.all(5),width: 10,height: 10,decoration: BoxDecoration(color: _currentIndex == index ? Colors.blue : Colors.grey,shape: BoxShape.circle //圆),);}).toList(),))],);}
}class ImagePage extends StatelessWidget {final double width;final double height;final String src;const ImagePage({super.key,this.width = double.infinity,this.height = 200,required this.src});@overrideWidget build(BuildContext context) {return SizedBox(width: width,height: height,child: Image.network(src,fit: BoxFit.cover,),);}
}

pageViewSwiper.dart：

import 'package:flutter/material.dart';
import '../widget/swiper.dart';class PageViewSwiperPage extends StatefulWidget {const PageViewSwiperPage({super.key});@overrideState<PageViewSwiperPage> createState() => _PageViewSwiperPageState();
}class _PageViewSwiperPageState extends State<PageViewSwiperPage> {List<String> list = [];@overridevoid initState() {super.initState();list = ["https://xixi-web-tlias.oss-cn-guangzhou.aliyuncs.com/1.jpg","https://xixi-web-tlias.oss-cn-guangzhou.aliyuncs.com/2.jpg","https://xixi-web-tlias.oss-cn-guangzhou.aliyuncs.com/3.jpg","https://xixi-web-tlias.oss-cn-guangzhou.aliyuncs.com/4.jpg",];}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text('PageViewSwiper'),),body: ListView(children: [Swiper(list: list),],));}
}

在这里插入图片描述
在这里插入图片描述

这篇关于【Flutter】Dialog组件PageView组件的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1007791。

相关文章

JS常用组件收集

JS常用组件收集

收集了一些平时遇到的前端比较优秀的组件，方便以后开发的时候查找！！！ 函数工具： Lodash 页面固定： stickUp、jQuery.Pin 轮播： unslider、swiper 开关: switch 复选框： icheck 气泡： grumble 隐藏元素： Headroom
阅读更多...
如何在页面调用utility bar并传递参数至lwc组件

如何在页面调用utility bar并传递参数至lwc组件

1.在app的utility item中添加lwc组件： 2.调用utility bar api的方式有两种： 方法一，通过lwc调用： import {LightningElement,api ,wire } from 'lwc';import { publish, MessageContext } from 'lightning/messageService';import Ca
阅读更多...
Flutter 进阶：绘制加载动画

Flutter 进阶：绘制加载动画

绘制加载动画：由小圆组成的大圆 1. 定义 LoadingScreen 类2. 实现 _LoadingScreenState 类3. 定义 LoadingPainter 类4. 总结 实现加载动画 我们需要定义两个类：LoadingScreen 和 LoadingPainter。LoadingScreen 负责控制动画的状态，而 LoadingPainter 则负责绘制动画。
阅读更多...
vue2 组件通信

vue2 组件通信

props + emits props:用于接收父组件传递给子组件的数据。可以定义期望从父组件接收的数据结构和类型。‘子组件不可更改该数据’emits:用于定义组件可以向父组件发出的事件。这允许父组件监听子组件的事件并作出响应。(比如数据更新) props检查属性 属性名类型描述默认值typeFunction指定 prop 应该是什么类型，如 String, Number, Boolean,
阅读更多...
kubelet组件的启动流程源码分析

kubelet组件的启动流程源码分析

概述 摘要: 本文将总结kubelet的作用以及原理，在有一定基础认识的前提下，通过阅读kubelet源码，对kubelet组件的启动流程进行分析。 正文 kubelet的作用 这里对kubelet的作用做一个简单总结。 节点管理 节点的注册 节点状态更新 容器管理(pod生命周期管理) 监听apiserver的容器事件 容器的创建、删除(CRI) 容器的网络的创建与删除
阅读更多...
火语言RPA流程组件介绍--浏览网页

火语言RPA流程组件介绍--浏览网页

🚩【组件功能】：浏览器打开指定网址或本地html文件 配置预览 配置说明 网址URL 支持T或# 默认FLOW输入项 输入需要打开的网址URL 超时时间 支持T或# 打开网页超时时间 执行后后等待时间(ms) 支持T或# 当前组件执行完成后继续等待的时间 UserAgent 支持T或# User Agent中文名为用户代理，简称 UA，它是一个特殊字符串头，使得服务器
阅读更多...
Flutter Button使用

Flutter Button使用

Material 组件库中有多种按钮组件如ElevatedButton、TextButton、OutlineButton等，它们的父类是于ButtonStyleButton。         基本的按钮特点：         1.按下时都会有“水波文动画”。         2.onPressed属性设置点击回调，如果不提供该回调则按钮会处于禁用状态，禁用状态不响应用户点击。
阅读更多...
vue 父组件调用子组件的方法报错，“TypeError: Cannot read property ‘subDialogRef‘ of undefined“

vue 父组件调用子组件的方法报错，“TypeError: Cannot read property ‘subDialogRef‘ of undefined“

vue 父组件调用子组件的方法报错，“TypeError: Cannot read property ‘subDialogRef’ of undefined” 最近用vue做的一个界面，引入了一个子组件，在父组件中调用子组件的方法时，报错提示： [Vue warn]: Error in v-on handler: “TypeError: Cannot read property ‘methods
阅读更多...
JavaEE应用的组件

JavaEE应用的组件

1、表现层组件：主要负责收集用户输入数据，或者向客户显示系统状态。最常用的表现层技术是JSP，但JSP并不是唯一的表现层技术。 2、控制器组件：对于JavaEE的MVC框架而言，框架提供一个前端核心控制器，而核心控制器负责拦截用户请求，并将用户请求转发给用户实现的控制器组件。而这些用户实现的控制器则负责处理调用业务逻辑方法，处理用户请求。 3、业务逻辑组件：是系统的核心组件，实现系统的业务逻辑
阅读更多...
17 通过ref代替DOM用来获取元素和组件的引用

17 通过ref代替DOM用来获取元素和组件的引用

重点 ref :官网给出的解释是： ref: 用于注册对元素或子组件的引用。引用将在父组件的$refs 对象下注册。如果在普通DOM元素上使用，则引用将是该元素；如果在子组件上使用，则引用将是组件实例： <!-- vm.$refs.p will be the DOM node --><p ref="p">hello</p><!-- vm.$refs.child will be the c
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2