flutter实战
本专题,主要帮助学习flutter各种组件
laying_1230
这个作者很懒,什么都没留下…
展开
-
TabPageSelectorIndicator(一个指定背景颜色、边框颜色和大小的圆形指示器)
TabPageSelectorIndicatorTabPageSelectorIndicator是一个指定背景颜色、边框颜色和大小的圆形指示器,用法如下:TabPageSelectorIndicator( backgroundColor: Colors.blue, borderColor: Colors.red, size: 100,)效果如下:TabPageSelectorIndicator是一个相对简单的控件,其实质就是一个Container,源代码如下:@override原创 2021-07-20 16:02:56 · 360 阅读 · 0 评论 -
AnimatedList
AnimatedListAnimatedList提供了一种简单的方式使列表数据发生变化时加入过渡动画,下面是一种动画效果:AnimatedList主要属性如下表。属性说明itemBuilder一个函数,列表的每一个索引会调用,这个函数有一个animation参数,可以设置成任何一个动画initialItemCountitem的个数scrollDirection滚动方向,默认垂直controllerscroll控制器列表数据的插入和删除有进出场动画原创 2021-06-17 14:05:20 · 124 阅读 · 0 评论 -
AnimatedIcon
AnimatedIcon我们都知道Flutter系统中提供了大量的图标,但你是否知道Flutter还提供了很多动画图标,想要使用这些动画图标需要使用AnimatedIcon控件,首先需要设置图标,代码如下:AnimatedIcon( icon: AnimatedIcons.view_list, ...)还需要设置 progress , progress 用于图标的动画,设置如下:import 'package:flutter/material.dart';class Test ext原创 2021-06-17 13:55:44 · 360 阅读 · 0 评论 -
AnimatedCrossFade
AnimatedCrossFadeAnimatedCrossFade组件让2个组件在切换时出现交叉渐入的效果,因此AnimatedCrossFade需要设置2个子控件、动画时间和显示第几个子控件,用法如下:AnimatedCrossFade( duration: Duration(seconds: 1), crossFadeState: _showFirst ? CrossFadeState.showFirst : CrossFadeState.showSecond, first原创 2021-06-17 13:52:17 · 393 阅读 · 0 评论 -
AnimatedContainer
AnimatedContainerFlutter中很多用于动画的控件,这篇文章介绍动画控件 AnimatedContainer ,我们可以通俗的理解AnimatedContainer是带动画功能的Container,关于Container的详细介绍可以查看Flutter Widgets 之 Container,这篇详细介绍了Container的用法。AnimatedContainer只需要提供动画开始值和结束值,它就会动起来并不需要我们主动调用 setState 方法。 变化AnimatedContai原创 2021-06-17 13:49:10 · 336 阅读 · 0 评论 -
AnimatedBuilder
AnimatedBuilderAnimatedBuilder可以让我们轻松的构建动画控件,下面的案例是让flutter logo图片旋转,代码如下:class _TestState extends State<Test> with TickerProviderStateMixin {AnimationController animationController;@overridevoid initState() { animationController = Anim原创 2021-06-17 13:44:52 · 243 阅读 · 0 评论 -
AnimatedAlign
AnimatedAlignAnimatedAlign组件方便我们构建位置动画,基本用法如下:var _alignment = Alignment.topLeft;@override Widget build(BuildContext context) { return Container( width: 200, height: 200, color: Colors.lightBlue, child: AnimatedAlign(原创 2021-06-17 13:42:29 · 101 阅读 · 0 评论 -
ScrollPhysics(可滚动组件的滚动特性)
ScrollPhysicsScrollPhysics并不是一个组件,它定义了可滚动组件的物理滚动特性。例如,当用户达到最大滚动范围时,是停止滚动,还是继续滚动。滚动组件(CustomScrollView、ScrollView、GridView、ListView等)的 physics 参数表示此属性,系统提供的ScrollPhysics有:AlwaysScrollableScrollPhysics总是可以滑动,用法如下:CustomScrollView( physics: AlwaysScro原创 2021-06-17 11:49:38 · 1188 阅读 · 0 评论 -
AlignTransition(子控件动画)
AlignTransition对Align子控件位置变换动画,用法如下:@override void initState() { _animationController = AnimationController(duration: Duration(seconds: 2), vsync: this); _animation = Tween<AlignmentGeometry>( begin: Alignment.topLeft,原创 2021-06-17 11:46:54 · 226 阅读 · 0 评论 -
Align和Center
AlignAlign和Center控件都是控制子控件位置的控件。Align基本用法:Container( color: Colors.lightBlue, width: 200, height: 200, child: Align( child: Text('唐德',style: TextStyle(color: Colors.white,fontSize: 20),), ),)Align默认居中对齐,效果如下;当然还可以设置其他对齐方法,比如 bottomRi原创 2021-06-17 11:45:08 · 404 阅读 · 0 评论 -
AboutDialog
AboutDialogAboutDialog用于描述当前App信息,底部提供2个按钮:查看许可按钮和关闭按钮。AboutDialog需要和showAboutDialog配合使用,用法如下:showAboutDialog( context: context, applicationIcon: Image.asset( 'images/bird.png', height: 100, width: 100, ), applicationName: '应用程序', a原创 2021-06-17 11:19:02 · 236 阅读 · 0 评论 -
提示窗口(AlertDialog、CupertinoAlertDialog、SimpleDialog、Dialog)
AlertDialog当应用程序进行重要操作时经常需要用户进行2次确认,以避免用户的误操作,比如删除文件时,一般会弹出提示“是否要删除当前文件”,用户点击确认后才会进行删除操作,这时我们可以使用提示框(AlertDialog或者CupertinoAlertDialog)。根据设计的不同,我们可以选择Material风格的AlertDialog或者Cupertino(ios)风格的CupertinoAlertDialog,Material风格基础用法如下:RaisedButton( child:原创 2021-06-17 11:15:23 · 567 阅读 · 0 评论 -
Chip类控件(Chip、InputChip、ChoiceChip、FilterChip、ActionChip)
RawChipMaterial风格标签控件,此控件是其他标签控件的基类,通常情况下,不会直接创建此控件,而是使用如下控件:ChipInputChipChoiceChipFilterChipActionChip如果你想自定义标签类控件时通常使用此控件。RawChip可以通过设置 onSelected 被选中,设置 onDeleted 被删除,也可以通过设置 onPressed 而像一个按钮,它有一个 label 属性,有一个前置(avatar)和后置图标(deleteIcon)。基本用法原创 2021-06-17 11:09:14 · 1397 阅读 · 0 评论 -
AbsorbPointer(禁止用户输入的控件)
AbsorbPointerAbsorbPointer是一种禁止用户输入的控件,比如按钮的点击、输入框的输入、ListView的滚动等,你可能说将按钮的onPressed设置为null,一样也可以实现,是的,但AbsorbPointer可以提供多组件的统一控制,而不需要你单独为每一个组件设置。用法如下:AbsorbPointer( child: Row( children: <Widget>[ RaisedButton(onPressed: (){},),原创 2021-06-17 10:46:56 · 436 阅读 · 0 评论 -
AboutListTile
AboutDialogAboutDialog用于描述当前App信息,底部提供2个按钮:查看许可按钮和关闭按钮。AboutDialog需要和showAboutDialog配合使用,用法如下:showAboutDialog( context: context, applicationIcon: Image.asset( 'images/bird.png', height: 100, width: 100, ), applicationName: '应用程序', a原创 2021-06-15 17:38:45 · 126 阅读 · 0 评论