dart
「已注销」
这个作者很懒,什么都没留下…
展开
-
Flutter_43_国际化
国际化(internationlization 简称i18n)终端(手机)系统语言切换时,Flutter应用的跟随切换,内容组件(Widget)国际化例如:日历,弹窗等常用组件的国际化文本国际化(包括文本的顺序)自定义文本的国际化在pubspec.yaml中引入flutter_localizations安装包 flutter pub get (VS Code中保存自动安装)设置MaterialAppimport 'package:flutter..原创 2021-08-28 17:15:00 · 116 阅读 · 0 评论 -
Flutter_42_Hero动画
Hero动画用来实现跨页面的动画效果在不同页面中,声明一个共享组件(Hero)由于共享组件在不同页面的位置、外观等不同,路由切换时,形成动画效果如何实现在页面A中定义起始Hero组件(source hero),声明tag在页面B中定义目标Hero组件(destination hero),绑定系统的tag页面跳转时,通过Navigator,传递tagHero组件tag(路由切换时,共享组件的标记)child(声明子组件)import 'package:flutter/.原创 2021-08-28 17:14:03 · 141 阅读 · 0 评论 -
Flutter_41_交织动画
why交织动哈是由多个单个一动画叠加而形成复杂动画例如:组件变化肯涉及高度、宽度、颜色、透明度、位置等等需要给每个动画设置时间间隔(Interval)transform(对组件进行矩阵变换)平移:Transform.translate()旋转:Transform.rotate()缩放:Transform.scale()import 'package:flutter/material.dart';import 'dart:math';void main() { //下.原创 2021-08-28 17:13:08 · 159 阅读 · 0 评论 -
Flutter_40_动画
whyUI界面设计合理的动画,可以让用户觉得更加流畅,直观,可以极大提高和改善用户体验what(实现原理)动画就是动起来的画面视觉暂时留:画面经视神经传入大脑后,不hi立即消失(会存留一段时间)帧(Frame):单个的画面,在学术上叫帧每秒中展示的帧数简称fps(Frame per Second)补间(Tween)d动画在补间动画中我们定义开始点和结束点,时间线以及定义转换时间和速度线。然后由系统计算,从开始到结束点。从而实现动画效果例如:透明度从0到1,颜色从0到255..原创 2021-08-28 17:12:11 · 83 阅读 · 0 评论 -
Flutter_39_Form
使用步骤创建表单Form,并以GlobalKey 作为唯一性的标识添加带验证逻辑的TextFormField到Form中创建按钮以验证和提交Form(表单容器)key(GlobalKey)child(子组件)TextFormFild(输入框)与TextField的区别:必须在Form内使用& 带有验证器validator(验证器)import 'package:flutter/material.dart';void main() { //下一个组件.原创 2021-08-28 17:11:16 · 156 阅读 · 0 评论 -
Flutter_38_Calendar
CakebdarDatePicker(日历选择器)initialCaledarModeDatePickerMode.dayDatePickerMode.yearShowDatePicker(日期选择器)initialDatePickerMode(year|day)initialEntryMode(calendaar|input)showTimePicker(时间选择器)import 'package:flutter/material.dart';import 'pac.原创 2021-08-28 17:09:40 · 302 阅读 · 0 评论 -
Flutter_37_TextField
autofocus(是否获取焦点)keyboardType(键盘类型)obscureText(设置为密码框)decoration(样式装饰)decoration(样式修饰)onChanged(内容更改时样式自动调用-value)labelText(标题)hintText(提示文字placeholder)maxLines(显示行数-文本域)import 'package:flutter/material.dart';void main() { //下一个组件 runApp(M.原创 2021-08-23 22:56:43 · 87 阅读 · 0 评论 -
Flutter_36_Radio
Radio(单选框)value(开关的值),一般与状态的值段绑定)onChanged(开关状态变更时调用)groughValue(选择组的值)RadioListTile(单选列表)value(开关的值,一般与状态字段绑定)onChanged(开关状态变更时调用)groupValue(选择组的值)import 'package:flutter/material.dart';void main() { //下一个组件 runApp(MyApp());}//Mat.原创 2021-08-23 22:56:01 · 181 阅读 · 0 评论 -
Flutter_35_CheckBox
Checkboxvalue(复选框的值)onChanged(复选框状态更改时调用)activeColor(选中时,复选框背景的颜色)chckColor(选中时,复选框中对号的颜色)CheckboxListTiletitle(标题)subtitle(子标题)import 'package:flutter/material.dart';void main() { //下一个组件 runApp(MyApp());}//MaterialAppclass MyApp.原创 2021-08-23 22:55:26 · 301 阅读 · 0 评论 -
Flutter_34_Switch
Switchvalue(开关的值,一般与状态字段绑定)onChanged(开关状态变更时调用)activeColor(开关开启时的圆圈颜色)activeTrackColor(开关开启时的轨道颜色)inactiveThumbColor(开关关闭时的圆圈颜色)inactiveTrackColor(开关关闭时的轨道颜色)CupertionSweitch(IOS风格的开关)import ‘package:flutter/cupertino.dart’import 'package:.原创 2021-08-23 22:54:29 · 76 阅读 · 0 评论 -
Flutter_33_top
DefaultTapController(整个Tap导航的容器)length(声明导航组件数量)child(指定子组件组件)TabBar(导航菜单)tabs(导航菜单数组)TabBarView(导航页面)children(多个导航页面内容)import 'package:flutter/material.dart';void main() { //下一个组件 runApp(MyApp());}//MaterialAppclass MyApp exten.原创 2021-08-23 22:53:37 · 83 阅读 · 0 评论 -
Flutter_32_BottomnavigationBar
items包含导航(BottomnavigationBarItem)的列表currentIndex当前导航索引type导航类型(BottomNavigationBatType)onTap()导航的点击事件(一般会更新导航索引)import 'package:flutter/material.dart';void main() { //下一个组件 runApp(MyApp());}//MaterialAppclass MyApp extends .原创 2021-08-23 22:52:33 · 78 阅读 · 0 评论 -
Flutter_31_Drawer导航
Scaffolddrawer(左侧抽屉菜单)endDrawer(右侧抽屉菜单)UserAccountsDrawerHeader抽屉菜单头部组件AboutListTitle关于弹窗import 'package:flutter/material.dart';void main() { //下一个组件 runApp(MyApp());}//MaterialAppclass MyApp extends StatelessWidget { @overrid.原创 2021-08-23 22:51:44 · 197 阅读 · 0 评论 -
Flutter_30_路由传参
路由传参-匿名路由路由中声明参数Navigator.push组件中接受参数Navigator.push(context, MaterialPageRoute(builder:(context){ return BlogDetail( id:blogitem['id'], ); }));class BlogDetail extends StatefulWidget{ //构造函数 BlogDetail({Key原创 2021-08-23 22:51:04 · 157 阅读 · 0 评论 -
Flutter_29_动态路由
动态路由是指,通过onGEnerateRoute属性指定的路由MateriApp(//通过 OngenerateRoute 生成动态路由 onGenerateRoute:(settings){ //处理首页 '/' if(setting.name = '/'){ return MaterialPageRoute(builder:(context) => HomeScreen()); } //处理详情.原创 2021-08-23 22:49:58 · 430 阅读 · 0 评论 -
Flutter_28_命名路由
声明路由routes路由表(Mao类型)initialRoute (初始化路由)onUnknowRoute(未知路由-404)跳转路由命名路由Navigator.pushNamed(context,‘路由名称’)命名路由MaterialApp(//...//其他配置 routes:{//注册路由(路由表) 'firest':(context) => FirstPage(), 'second':(context) = &g..原创 2021-08-23 22:48:53 · 82 阅读 · 0 评论 -
FLutter_27_匿名路由
Route一个路由时一个屏幕或界面的抽象Navigator管理路由的组件。Navigator 可以通过路由入栈和出栈来实现页面之间的跳转常用属性:initialRoute:初始路由,即默认页面onGenerateRoute:动态路由(根据规则,匹配动态路由)onUnknowRoute:未知路由,也就是404routes:路由集合匿名路由 Navigatorpush(跳转到指定组件)Navigator.push(context,MaterialPag.原创 2021-08-22 20:31:43 · 215 阅读 · 0 评论 -
Flutter_26_Provider
Provider 是对InheritedWidget的封装https://pub.dev/packages/provider优点:简化资源的分配与处置懒加载Provider#mermaid-svg-T3sS074rtFWhQy9x .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#333;color:#333}#mermaid-svg-T3s.原创 2021-08-22 20:30:48 · 71 阅读 · 0 评论 -
Flutter_25_生命周期
initState() 组件对象插入到元素树中时didChangeDependencies()当前状态对象的依赖改变时build()组件渲染时setState()组件对象的内部组件变更时didUpdateWidget() 组件配置更新时deactive()组件对象在元素树中暂时移除时dispose() 组件对象在元素树中永远移除时#mermaid-svg-ZF9dsTyB4pPUWlJl .label{font-family:'trebuchet ms', verdana, arial;f.原创 2021-08-22 20:29:55 · 55 阅读 · 0 评论 -
Flutter_23_InheritedWidget
what :提供了沿树向下,共享数据的功能即子组件可以获取父组件(InheritedWidget的子类)的数据Why:依赖构造函数传递数据的凡是不能满足业务要求所以,需要一个新的,更好的跨足件数据传输方案#mermaid-svg-MjwvKOiGtOQRmpiO .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#333;color:#333}#.原创 2021-08-22 20:29:16 · 44 阅读 · 0 评论 -
Flutter_22_DataTable
DataTable是Flutter中的表格columns(声明)表头列表DataColumn(表头单元格)rows(声明数据列表)DataRow(一行数据)DataCell(数据单元格)其他属性import 'package:flutter/material.dart';void main() { //下一个组件 runApp(MyApp());}//MaterialAppclass MyApp extends StatelessWidget {.原创 2021-08-22 20:28:14 · 293 阅读 · 0 评论 -
Flutter_21_StatefulWidget
flutter 中 的组件,按状态划分StatelessWidget(无状态组件)StatefulWidget(状态组件)按状态作用域划分组件内私有状态(StatefulWidget)跨组件状态共享(inheritedWidget、provider)全局状态(Redux | fish-redux、Mobx…)状态组件的组成statefulWidget(组件本身不可变-@immutable)State(将变化的状态放到State中维护)import 'package:.原创 2021-08-22 20:27:33 · 60 阅读 · 0 评论 -
Flutter_20_share_preferences
share_preferences是一个本地数据缓存库(类似asyncStorage)https://pub.dev/packages/shared_preferences使用步骤在pubsepc.yaml中添加shared_preferences依赖安装依赖(pub get |flutter packages get | VS Code 中保存配置,自动下载)引入 import ‘package:shared_preferences/shared_preferences.dart’;.原创 2021-08-22 20:25:54 · 106 阅读 · 0 评论 -
Flutter_19_swiper
Flutter 中最好的轮播组件,适配android和IOShttps://pub.dev/packages/flutter_swiper使用步骤在pubsepc.yaml 中添加flutter_sweiper依赖安装依赖(pub get | flutter packages get | VS Code 中保存配置,自动下载)引入 import ‘package:flutter_swiper/flutter_swiper.dart’;使用import 'package:flut.原创 2021-08-22 20:24:21 · 132 阅读 · 0 评论 -
Flutter_18_dio
dio是一个强大的Dart Http请求库(类似axios)https://pub.dev/packages/dio使用步骤在pubsepc.yaml中添加dio依赖安装依赖(pub get | flutter packages get | vs Code 中保存配置,自动下载)引入import ‘package:dio/dio.dart’使用:https://pub.dev/docmentation.dio/latest/import 'package:dio/dio.dar.原创 2021-08-22 20:23:39 · 79 阅读 · 0 评论 -
Flutter_16_GridView
GridView(网格布局)children(子组件)scrollDirection (滚动方向)gridDelegatesliverGridDelegateWithFixedCrossAxisCount(指定列数-子组件宽度自适应)sliverGridDelegateWithFixedCrossAxisExtent(指定子组件-列数自适应)GridView.count(列数固定)Girdbuilder(动态网格布局)列数(固定):crossAxisCount:2格宽:c.原创 2021-08-21 20:25:29 · 467 阅读 · 0 评论 -
Flutter_15_ListView
ListView加载列表的组件(加载所有Wifgets ,使用Widget较少的场景)ListTile(leading、title、subtitle、trailing、selected)ListView.builder按需加载Widget,性能比默认构造函数高,适用Widget较多的场景ListView.separated比ListView.builder多了分隔器import 'package:flutter/material.dart';void main()..原创 2021-08-21 20:24:31 · 60 阅读 · 0 评论 -
Flutter_14_singleChildScrollView
SingleChildCScrollView(类似Android中的ScrollView)child(子组件)padding(内边距)scrollDirection(滚动方向:Axis.horizontal | Axis.vertical)reverse(初始滚动位置,false 头部、ture尾部)physicsclampingScollPhysics:Android下微光效果BouncingScrollPhysics:IOS下弹性效果import 'package:flu.原创 2021-08-21 20:23:17 · 267 阅读 · 0 评论 -
Flutter_13_图片
Image.asset(加载本地图片)Flutter项目下,创建图片存储目录在pubspec.yaml中的flutter部分添加图片配置在代码中添加加载图片Image.netWork(加载网络图片)保证网络畅通设置网络访问权限允许http协议访问import 'package:flutter/material.dart';//涉及内容 查看04和10void run() { //下一个组件 runApp(MyApp());}//MaterialAppclas.原创 2021-08-21 20:21:58 · 69 阅读 · 0 评论 -
Flutter_12_按钮
Flutter 1.22之前Flatbutton(扁平按钮)RaisedButtion(突起按钮)OtlineButton(轮廓按钮)Flutter 1.22之后TextButton (文本按钮-用来替换FlatButton)ElevatedButton(凸起按钮-用来替换RaisedButton)OutLineButton(轮廓按钮-用来替换OutLineButton)按钮主题TextButtonTextButtonThemeOutLineB..原创 2021-08-21 20:20:58 · 185 阅读 · 0 评论 -
Flutter_11_Card
Card(卡片)child(子组件)color(背景色)shadowColor(阴影色)elevatioan(阴影高度)shape(边框样式)margin(边框)ListTile(列表瓦片)leading(头部组件)title(标题)subtitle(子组件)import 'package:flutter/material.dart';void m() { //下一个组件 runApp(MyApp());}//MaterialAppclass MyA.原创 2021-08-21 20:19:34 · 52 阅读 · 0 评论 -
Flutter_10_层叠布局
Stack(层叠组件-类似css中的z-index)alignment(声明未定位组件的对齐方式)textDirection(声明未得组件的排列顺序)Positioned(绝对定位组件)child (声明子组件)left,top,right,bottomwidth,heightNetworkLmage(网络图片组件)NetworkImage(‘图片地址’)<uses-permission android:name=“android.permission.I..原创 2021-08-21 20:18:09 · 234 阅读 · 0 评论 -
Flutter_09_流式布局
Wrap(解决内容溢出问题)spacing(主轴方向组件的间距)alignment(主轴方向的对齐方式)runSpacing(纵轴方向组件的间距)runAlignment(纵轴方向的对齐方式)Chip(标签)CircleAvatar(圆形头像)import 'package:flutter/material.dart';void main() { //下一个组件 runApp(MyApp());}//MaterialAppclass MyApp extends S.原创 2021-08-21 20:15:56 · 87 阅读 · 0 评论 -
Flutter_08_弹性布局
Flexdirection(声明主轴方向)mainAxisAlignment(声明主轴对齐方式)textDirection(声明交叉轴对齐方式)verticalDirection(声明垂直方向的排列顺序)children(声明子组件)Expanded(可伸缩组件)flex(声明弹性布局)child(声明子组件)import 'package:flutter/cupertino.dart';import 'package:flutter/material.dart';im.原创 2021-08-21 20:14:39 · 104 阅读 · 0 评论 -
Flutter_07_线性布局
columnColumn 中的主轴方向是垂直方向mainAxisAlignment:MainAxisAlignment 主轴对齐方式corssAxisAlignment:CorssAxisAlignment 交叉轴对齐方式children:内容RowRow中的主轴方向是水平方向(其他属性与Column一致)import 'package:flutter/cupertino.dart';import 'package:flutter/material.dart';void .原创 2021-08-21 20:12:05 · 68 阅读 · 0 评论 -
Flutter_06_布局
布局-containerchild(声明组件)padding(margin)Edgelnsets (all()、fromLTEB()、only())decorationBoxdecoration (边框、圆角、渐变、阴影、背景色、北京图片)alinmentAlinment(内容对齐)transformMatrix4(平移-translate、旋转-rotate、缩放-scale、斜切-skew)import 'package:flutter/material.原创 2021-08-20 10:19:24 · 50 阅读 · 0 评论 -
Flutter_05_Icon&Color
IconFlutter 中的图标库Icon(Icons.具体名称)在线预览Icon图标Color(自定义颜色) Flutter中通过ARGB来声明const Color(0xFF42A5F5); //16进制的ARGB=透明度+6位十六位进制颜色const Color.fromARGB(0xFF,0x42,0xA5,0xF5);const Color.fromARGB(255,66,165,254);const Color.fromRGBO(66,165,254,1.0);原创 2021-08-20 10:18:26 · 795 阅读 · 0 评论 -
Flutter_04_设置自定义组件
声明字体(本专栏超链接全部都需要国际网,后面不在提示)加压压缩包,将字体文件复制到Flutter项目中在pubspec.yaml声明字体name: flutter_spacedescription: A new Flutter project.# The following line prevents the package from being accidentally published to# pub.dev using `pub publish`. This is preferred原创 2021-08-20 10:06:20 · 85 阅读 · 0 评论 -
Flutter_03_文本组件
TextTextDirction(文本方向)TextStyle(文本样式)Colors(文本颜色)FontWeight(字体粗细)FontStyle(文本样式)TextAlign(文本对齐)TextOverflow(文本溢出)maxLines(指定显示的行数)RichText与TextSpanimport 'package:flutter/cupertino.dart';import 'package:flutter/material.dart';void main.原创 2021-08-20 10:02:52 · 95 阅读 · 0 评论 -
Flutter_02_App结构
MaterialApptitle(任务管理器中的标题)home(主内容)debugShowCheckedModeBanner(是否形式右上角调试标记)ScaffoldappBar(应用头部)body(应用主体)floatingActionButton(浮动按钮)drawer(左侧抽屉菜单)endDrawer(右侧抽屉菜单)#mermaid-svg-34eO0Wr4DIgA8J43 .label{font-family:'trebuchet ms', verdana, arial;font原创 2021-08-20 10:01:59 · 73 阅读 · 0 评论