![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
fflutter组件
jiahua123_dongzhou
青春是有限的,智慧是无穷的,趁短的青春,去学习无穷的智慧。——高尔基
喜欢IT 喜欢摄影 追求自己的爱好
展开
-
Flutter 网络请求框架dio使用分析
Flutter 网络请求框架dio使用分析import 'dart:ffi';import 'package:dio/dio.dart';import 'package:flutter/material.dart';import 'dart:convert';void main() { runApp(MyApp());}class MyApp extends StatelessWidget { const MyApp({Key key}) : super(key: key);原创 2020-10-21 09:19:51 · 553 阅读 · 0 评论 -
mockjs+json-server
ScaffoldAppbarBottomNavigationBarTabBarTabBarViewDrawermock开始 & 安装npm install mockjs -g //-g是全局安装的如果你要单独一个文件里创建的话不需要-G 进入自定义目录 然后//里面安装即可使用方法第一步 桌面新建一个文件text 然后用编辑器打开(VSCODE)第二部 新建一个aaa.js 里面导入下面的代码// 使用 Mockvar Mock = require('mockjs')原创 2020-09-05 11:46:26 · 226 阅读 · 0 评论 -
滑动布局-ScrollView、SingleChildScrollView 、ListView 、GridView
滑动布局-ScrollView、SingleChildScrollView 、ListView 、GridView可滑动的Widget-ScrollView我在用Column进行布局的时候,由于子节点过多,导致出现了OverFlow的提示,这个就是告诉我们内容超出范围了,这个在Android里来做就不会给你提示了,他会直接截取掉,不显示,为了解决这个错误我第一时间想到的就是像Android一样给他套一个ScrollView,Flutter的ScrollView不是一个可以直接使用的滑动widget,他是原创 2020-09-04 22:11:37 · 568 阅读 · 0 评论 -
Flutter TabBar TabBarView
Flutter TabBar TabBarViewFlutter 系列文章 总体目录TabBar 是一排水平的标签,可以来回切换,效果图:属性说明tabs一系列标签控件controller标签选择变化控制器isScrollable是否可滚动,默认falseindicatorColor指示器颜色indicatorWeight指示器粗细indicator指示器,可自定义形状等样式indicatorSize指示器长短,tab:和tab一原创 2020-09-04 22:03:18 · 411 阅读 · 1 评论 -
Flutter ListView新笔记
文章目录Flutter ListViewFlutter ListView加载更多/异步加载(ListView.builder)Flutter ListView分割线(ListView.separated)Flutter ListView列表布局在手机上是最最常用的控件了。Android上的RecycleView尤其的强大。Flutter中也给我们提供了ListView,不过就目前的体验来看,性能跟原生的ListView或RecycleView比还是有一点差距的。滑动起来还是略卡。原创 2020-09-04 21:51:27 · 127 阅读 · 0 评论 -
Flutter底部导航栏BottomNavigationBar
Flutter底部导航栏BottomNavigationBar文章目录Flutter 底部导航栏(BottomNavigationBar)BottomNavigationBarBottomNavigationBarItem简单使用Flutter 底部导航栏(BottomNavigationBar)在移动开发中,底部导航栏是非常常见的,在之前我也写过一篇关于在Android中如何使用底部导航栏的博客,感兴趣的可以看一下。下面,我们来看一下在Flutter 中 底部导航栏是如何使用的原创 2020-09-04 21:42:48 · 269 阅读 · 0 评论 -
Flutter Button按钮
按钮Material组件库中的按钮Material 组件库中提供了多种按钮组件如RaisedButton、FlatButton、OutlineButton等,它们都是直接或间接对RawMaterialButton组件的包装定制,所以他们大多数属性都和RawMaterialButton一样。在介绍各个按钮时我们先介绍其默认外观,而按钮的外观大都可以通过属性来自定义,我们在后面统一介绍这些属性。另外,所有Material 库中的按钮都有如下相同点:按下时都会有“水波动画”(又称“涟漪动画”,就是点击时按原创 2020-09-04 10:19:37 · 394 阅读 · 0 评论 -
Flutter 封装组件
封装组件class MyBody extends StatelessWidget { const MyBody({Key key}) : super(key: key); @override Widget build(BuildContext context) { return Container( child: Wrap( children: [ RaisedButton( onPressed: () {},原创 2020-09-04 09:02:20 · 953 阅读 · 0 评论 -
Wrap组件
Wrap组件Wrap可以实现流布局,单行的Wrap跟Row表现几乎一致,单列的Wrap则跟Row表现几乎一致。但Row与columl都是单行单列的,Wrap则突破了这个限制,mainAxis上空间不足时,则向crossAxis上去扩展显示。属性默认值说明directionAxis.horizontal主轴的方向,默认水平alignmentWrapAlignment.start主轴的对其方式spacing0.0主轴方向上的间距runAlignmentW原创 2020-09-04 09:01:00 · 214 阅读 · 0 评论 -
CircleAvatar 圆形头像组件
CircleAvatar 圆形头像组件CircleAvatar是一个圆形Image,常用来显示用户Icon,比Android中实现圆形ImageView简单多了。构造方法如下: const CircleAvatar({ Key key, this.child, this.backgroundColor,//背景色,相当于加载中或加载失败的占位图 this.backgroundImage,//背景图,相当于加载中或加载失败的占位图 this.foregroundC原创 2020-09-03 18:51:24 · 1910 阅读 · 0 评论 -
Flutter Divider 分割线
Flutter Divider 分割线属性值描述height分割线高度indent分割线距离start伸缩距离endIndent分割线距离end伸缩距离color分割线颜色实例:Divider( height: 1, color: Colors.red, indent: 120, )效果如下:...原创 2020-09-03 18:28:54 · 649 阅读 · 0 评论 -
Flutter Stack Align Positioned
Flutter Stack 层叠组件在介绍Stack 层叠组件时,顺便带上Align**和Positioned**,以及组合使用参数详解Stack属性说明alignment布局定位 默认 AlignmentDirectional.topStart我们也可以直接传入参数,自定义位置(值在1与-1之间),如:alignment: Alignment(0.5,0.5),textDirection正反排序TextDirection.ltrTextDirection.rtl原创 2020-09-03 18:04:32 · 201 阅读 · 0 评论 -
Flutter Row
Flutter Row1 RowRow 是一个可以沿水平方向展示它的子组件的组件。它还可以灵活布局,如果要让某个子组件填充满剩余剩余空间,请使用 Expanded 组件包裹该组件即可。Row 组件是不可以滚动的,所以在 Row 组件中一般不会放置过多子组件,如果需要滚动的话应该考虑使用 ListView。如果需要垂直展示,应该考虑 Column 组件。如果只有一个子组件的话,应该考虑使用使用 Align 或者 Container 组件来定位这个子组件。说了这么多,对我来说,Row 就是一个 o原创 2020-09-03 18:02:38 · 357 阅读 · 0 评论 -
padding 和 margin
padding 和 margin属性值描述fromLTRB(double left, double top, double right, double bottom)分别指定四个方向的补白。all(double value)所有方向均使用相同数值的补白。only({left, top, right ,bottom })可以设置具体某个方向的补白(可以同时指定多个方向)。symmetric({ vertical, horizontal })用于设置对称方向的补白原创 2020-09-03 18:00:31 · 299 阅读 · 0 评论 -
Expanded 布局
Expanded 布局属性说明flex弹性参数children子组件可以把Expanded布局中的flex看作Android中xml属性中的android:layout_weight这个属性1.ExpandedExpanded是用于展开Row,Column或Flex的子child的Widget。 使用Expanded可以使[Row],[Column]或[Flex]的子项扩展以填充主轴中的可用空间。例:不使用Expanded红色Column组件不使用Expa原创 2020-09-03 17:59:08 · 547 阅读 · 0 评论 -
FittedBox、AspectRatio、ConstrainedBox详解
1. FittedBox1.1 简介按照其官方的介绍,它主要做了两件事情,缩放(Scale)以及位置调整(Position)。FittedBox会在自己的尺寸范围内缩放并且调整child位置,使得child适合其尺寸。做过移动端的,可能会联想到ImageView控件,它是将图片在其范围内,按照规则,进行缩放位置调整。FittedBox跟ImageView是有些类似的,可以猜测出,它肯定有一个类似于ScaleType的属性。1.2 布局行为FittedBox的布局行为还算简单,官方没有给出说明,我在原创 2020-09-03 09:17:18 · 177 阅读 · 0 评论 -
Flutter GridView
Flutter GridView常用属性、4种使用方式的区别GridView()、GridView.count()、GridView.extent() 这三种和GridView.builder()的区别在于:GridView都需要一个Widget数组作为其子元素,前三种方式都会提前将所有子widget都构建好,所以只适用于子Widget数量比较少当子widget比较多时,我们可以通过GridView.builder来动态创建子Widget。常用属性属性名功能值所属类型s原创 2020-09-02 16:00:53 · 291 阅读 · 0 评论 -
如何创建和使用自定义的数据类型
如何创建和使用自定义的数据类型原创 2020-09-02 10:18:19 · 907 阅读 · 0 评论 -
Flutter ListView组件
Flutter ListView组件列表布局是我们项目开发中最常用的一种布局方式。Flutter中我们可以通过ListView来定义列表项,支持垂直和水平方向展示。通过一个属性就可以控制列表的显示方向。分类:1、垂直列表2、垂直图文列表3、水平列表4、动态列表5、矩阵式列表(网格布局)常用属性:属性值类型说明scrollDirectionAxis设置滚动的方向,horizontal(水平)或vertical(垂直)reversebool是否翻转ite原创 2020-09-02 10:14:53 · 93 阅读 · 0 评论 -
Flutter Card 组件
Flutter Card 组件Card是卡片组件块,内容可以由大多数类型的Widget构成,Card具有圆角和阴影,这让它看起来有立体感属性说明margin外边距child子组件Shapecard的阴影效果,默认的阴影效果为圆角的长方形边。这个就是动态列表组件加载方法 就是另一个数组渲染到CARD上面的方法...原创 2020-09-02 10:14:01 · 232 阅读 · 0 评论 -
Flutter Image Icon
图片(Image)在Flutter中,我们可以使用Image控件来显示图片,一般来讲我们的图片资源都来源于网络或者本地图片。Flutter中的Image也是类似。下面我们来看看其常用的属性属性值类型说明imageImageProvider必填参数,接收一个ImageProvider 类型的值semanticLabelString图片的描述excludeFromSemanticsbool是否从语义上排除该图片,默认值为falsewidthdoubl原创 2020-09-01 19:22:01 · 170 阅读 · 0 评论 -
#Flutter 裁剪布局之 ClipRect、ClipRRect、ClipOval、ClipPath、CustomClipper
Flutter 裁剪布局之 ClipRect、ClipRRect、ClipOval、ClipPath、CustomClipper文章目录裁剪布局ClipRectClipRRectClipOvalClipPath 及 CustomClipper裁剪布局Flutter中提供了一些剪裁widget,如下表格。widget作用ClipRect将 child 剪裁为给定的矩形大小ClipRRect将 child 剪裁为圆角矩形C原创 2020-09-01 19:06:06 · 2787 阅读 · 0 评论 -
Flutter Navigator基础使用
Flutter Navigator基础使用Navigator的使用分为两部分:本节说一些基本操作,如果你已经掌握了Navigator的基本跳转姿势1.路由最基本的使用-跳转和退出大多数App都包含了许多页面用来呈现不同种类的信息。例如:一个app可能存在“商品列表页”,当点击item的时候又会跳转到对应“商品详情”页面。在Flutter中,页面被称之为route(路由)。在android中路由等同于Activity,ios中路由等同于ViewController,然后在Flutter中路由只是一个原创 2020-08-31 22:56:09 · 245 阅读 · 0 评论 -
Flutter常用布局集合
容器组件(Container)容器组件(Container)是一个组合Widget,内部有绘制Widget、定位Widget和尺寸Widget,包含一个子Widget,自身具备如alignment、pading等基础属性,方便布局过程中摆放child。Container组件常用属性如下表:属性名类型说明keyKeyContainer唯一表示符,用于查找更新alignmentAlignmentGeometry控制child的对齐方式,如果Container或Contai原创 2020-08-31 13:11:43 · 851 阅读 · 0 评论 -
Flutter textFeild输入框和选择框
Flutter文本框TextField目录参数详解代码示例[ 效果图](https://blog.csdn.net/ruoshui_t/article/details/90578161?ops_request_misc=%7B%22request%5Fid%22%3A%22159884301219725264645373%22%2C%22scm%22%3A%2220140713.130102334…%22%7D&request_id=159884301219725264645373&原创 2020-08-31 11:35:51 · 3874 阅读 · 0 评论 -
Flutter Button
Flutter组件之按钮(RaisedButton)凸起按钮组件(RaisedButton)是Material Design中的button,一个凸起的材质矩形按钮,它可以响应按下事件,并且按下时会带一个触摸的效果。常用属性如下:属性名类型默认值说明colorColornull组件的颜色disabledColorColorThemeData.disabledColor组件禁用的颜色,默认为主题里的禁用颜色,也可以设置为其他颜色值onPressedVoi原创 2020-08-31 11:02:00 · 133 阅读 · 0 评论 -
SliverAppbar
Flutter SliverAppbar 控件介绍flutter SliverAppbar 控件介绍一、使用方法与CustomScrollView、NestedScrollView集成的材质设计应用栏。应用栏由工具栏和其他小部件组成,例如 TabBar和FlexibleSpaceBar。应用栏通常会使用IconButton公开一个或多个常见操作,后者可选地后跟 PopupMenuButton以进行不太常见的操作属性值描述leadingthis.leading,原创 2020-08-30 09:08:48 · 309 阅读 · 0 评论 -
Flutter Drawer
Flutter Drawer 侧滑菜单、抽屉Drawer 与Scaffold一起使用。是Scaffold中drawer属性。drawer通常是一个ListView,它的第一个子视图是一个DrawerHeader,但我们通常使用UserAccountsDrawerHeader显示当前用户的状态信息。其余的drawer子元素通常由ListTile构造,通常以AboutListTile结束。可以使用Navigator.pop(context)主动关闭Drawer。参数讲解属性说明Dra原创 2020-08-29 22:30:11 · 439 阅读 · 0 评论 -
Flutter 控件之 MaterialApp
Flutter 控件之 MaterialAppMaterialApp 代表使用纸墨设计(Material Design)风格的应用。里面包含了纸墨设计风格应用所需要的基本控件。MaterialApp 主要属性如下:title在任务管理窗口中所显示的应用名字theme应用各种 UI 所使用的主题颜色color应用的主要颜色值(primary color),也就是安卓任务管理窗口中所显示的应用颜色home应用默认所显示的界面 Widgetroutes应用的顶级原创 2020-08-29 22:19:28 · 276 阅读 · 0 评论 -
BottomNavigationBar
BottomNavigationBar首先,bottomNavigationBar 是属于 Scaffold 中的一个位于底部的控件。通常和 BottomNavigationBarItem 配合使用BottomNavigationBar构造方法 BottomNavigationBar({ Key key, @required this.items, this.onTap, this.currentIndex = 0, BottomNavigationBarT原创 2020-08-29 22:12:58 · 228 阅读 · 0 评论 -
Flutter Appbar
Flutter AppbarAppBar是一个顶端栏,对应着 Android 的 Toolbar。AppBar 有以下常用属性:属性类型描述leadingWidget在标题前面显示的一个控件,在首页通常显示应用的 logo;在其他界面通常显示为返回按钮。titleWidgetToolbar 中主要内容,通常显示为当前界面的标题文字。actionsList一个 Widget 列表,代表 Toolbar 中所显示的菜单,对于常用的菜单,通常使用 IconBu原创 2020-08-29 22:03:26 · 94 阅读 · 0 评论