jiahua123_dongzhou的博客

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);

ScaffoldAppbarBottomNavigationBarTabBarTabBarViewDrawermock开始 & 安装npm install mockjs -g //-g是全局安装的如果你要单独一个文件里创建的话不需要-G 进入自定义目录 然后//里面安装即可使用方法第一步 桌面新建一个文件text 然后用编辑器打开（VSCODE）第二部 新建一个aaa.js 里面导入下面的代码// 使用 Mockvar Mock = require('mockjs')

滑动布局-ScrollView、SingleChildScrollView 、ListView 、GridView可滑动的Widget-ScrollView我在用Column进行布局的时候，由于子节点过多，导致出现了OverFlow的提示，这个就是告诉我们内容超出范围了，这个在Android里来做就不会给你提示了，他会直接截取掉，不显示，为了解决这个错误我第一时间想到的就是像Android一样给他套一个ScrollView，Flutter的ScrollView不是一个可以直接使用的滑动widget，他是

Flutter TabBar TabBarViewFlutter 系列文章 总体目录TabBar 是一排水平的标签，可以来回切换，效果图：属性说明tabs一系列标签控件controller标签选择变化控制器isScrollable是否可滚动，默认falseindicatorColor指示器颜色indicatorWeight指示器粗细indicator指示器，可自定义形状等样式indicatorSize指示器长短，tab：和tab一

文章目录Flutter ListViewFlutter ListView加载更多/异步加载（ListView.builder）Flutter ListView分割线（ListView.separated）Flutter ListView列表布局在手机上是最最常用的控件了。Android上的RecycleView尤其的强大。Flutter中也给我们提供了ListView,不过就目前的体验来看，性能跟原生的ListView或RecycleView比还是有一点差距的。滑动起来还是略卡。

Flutter底部导航栏BottomNavigationBar文章目录Flutter 底部导航栏（BottomNavigationBar）BottomNavigationBarBottomNavigationBarItem简单使用Flutter 底部导航栏（BottomNavigationBar）在移动开发中，底部导航栏是非常常见的，在之前我也写过一篇关于在Android中如何使用底部导航栏的博客，感兴趣的可以看一下。下面，我们来看一下在Flutter 中 底部导航栏是如何使用的

按钮Material组件库中的按钮Material 组件库中提供了多种按钮组件如RaisedButton、FlatButton、OutlineButton等，它们都是直接或间接对RawMaterialButton组件的包装定制，所以他们大多数属性都和RawMaterialButton一样。在介绍各个按钮时我们先介绍其默认外观，而按钮的外观大都可以通过属性来自定义，我们在后面统一介绍这些属性。另外，所有Material 库中的按钮都有如下相同点：按下时都会有“水波动画”（又称“涟漪动画”，就是点击时按

封装组件class MyBody extends StatelessWidget { const MyBody({Key key}) : super(key: key); @override Widget build(BuildContext context) { return Container( child: Wrap( children: [ RaisedButton( onPressed: () {},

Wrap组件Wrap可以实现流布局，单行的Wrap跟Row表现几乎一致，单列的Wrap则跟Row表现几乎一致。但Row与columl都是单行单列的，Wrap则突破了这个限制，mainAxis上空间不足时，则向crossAxis上去扩展显示。属性默认值说明directionAxis.horizontal主轴的方向，默认水平alignmentWrapAlignment.start主轴的对其方式spacing0.0主轴方向上的间距runAlignmentW

CircleAvatar 圆形头像组件CircleAvatar是一个圆形Image，常用来显示用户Icon，比Android中实现圆形ImageView简单多了。构造方法如下： const CircleAvatar({ Key key, this.child, this.backgroundColor,//背景色，相当于加载中或加载失败的占位图 this.backgroundImage,//背景图，相当于加载中或加载失败的占位图 this.foregroundC

Flutter Divider 分割线属性值描述height分割线高度indent分割线距离start伸缩距离endIndent分割线距离end伸缩距离color分割线颜色实例：Divider( height: 1, color: Colors.red, indent: 120, )效果如下：...

Flutter Stack 层叠组件在介绍Stack 层叠组件时，顺便带上Align**和Positioned**，以及组合使用参数详解Stack属性说明alignment布局定位 默认 AlignmentDirectional.topStart我们也可以直接传入参数，自定义位置（值在1与-1之间），如：alignment: Alignment(0.5,0.5),textDirection正反排序TextDirection.ltrTextDirection.rtl

Flutter Row1 RowRow 是一个可以沿水平方向展示它的子组件的组件。它还可以灵活布局，如果要让某个子组件填充满剩余剩余空间，请使用 Expanded 组件包裹该组件即可。Row 组件是不可以滚动的，所以在 Row 组件中一般不会放置过多子组件，如果需要滚动的话应该考虑使用 ListView。如果需要垂直展示，应该考虑 Column 组件。如果只有一个子组件的话，应该考虑使用使用 Align 或者 Container 组件来定位这个子组件。说了这么多，对我来说，Row 就是一个 o

padding 和 margin属性值描述fromLTRB(double left, double top, double right, double bottom)分别指定四个方向的补白。all(double value)所有方向均使用相同数值的补白。only({left, top, right ,bottom })可以设置具体某个方向的补白(可以同时指定多个方向)。symmetric({ vertical, horizontal })用于设置对称方向的补白

Expanded 布局属性说明flex弹性参数children子组件可以把Expanded布局中的flex看作Android中xml属性中的android:layout_weight这个属性1.ExpandedExpanded是用于展开Row，Column或Flex的子child的Widget。 使用Expanded可以使[Row]，[Column]或[Flex]的子项扩展以填充主轴中的可用空间。例：不使用Expanded红色Column组件不使用Expa

1. FittedBox1.1 简介按照其官方的介绍，它主要做了两件事情，缩放（Scale）以及位置调整（Position）。FittedBox会在自己的尺寸范围内缩放并且调整child位置，使得child适合其尺寸。做过移动端的，可能会联想到ImageView控件，它是将图片在其范围内，按照规则，进行缩放位置调整。FittedBox跟ImageView是有些类似的，可以猜测出，它肯定有一个类似于ScaleType的属性。1.2 布局行为FittedBox的布局行为还算简单，官方没有给出说明，我在

Flutter GridView常用属性、4种使用方式的区别GridView()、GridView.count()、GridView.extent() 这三种和GridView.builder()的区别在于：GridView都需要一个Widget数组作为其子元素，前三种方式都会提前将所有子widget都构建好，所以只适用于子Widget数量比较少当子widget比较多时，我们可以通过GridView.builder来动态创建子Widget。常用属性属性名功能值所属类型s

如何创建和使用自定义的数据类型

Flutter ListView组件列表布局是我们项目开发中最常用的一种布局方式。Flutter中我们可以通过ListView来定义列表项，支持垂直和水平方向展示。通过一个属性就可以控制列表的显示方向。分类：1、垂直列表2、垂直图文列表3、水平列表4、动态列表5、矩阵式列表（网格布局）常用属性：属性值类型说明scrollDirectionAxis设置滚动的方向，horizontal（水平）或vertical（垂直）reversebool是否翻转ite

Flutter Card 组件Card是卡片组件块，内容可以由大多数类型的Widget构成，Card具有圆角和阴影，这让它看起来有立体感属性说明margin外边距child子组件Shapecard的阴影效果，默认的阴影效果为圆角的长方形边。这个就是动态列表组件加载方法 就是另一个数组渲染到CARD上面的方法...

图片（Image）在Flutter中，我们可以使用Image控件来显示图片，一般来讲我们的图片资源都来源于网络或者本地图片。Flutter中的Image也是类似。下面我们来看看其常用的属性属性值类型说明imageImageProvider必填参数，接收一个ImageProvider 类型的值semanticLabelString图片的描述excludeFromSemanticsbool是否从语义上排除该图片，默认值为falsewidthdoubl

Flutter 裁剪布局之 ClipRect、ClipRRect、ClipOval、ClipPath、CustomClipper文章目录裁剪布局ClipRectClipRRectClipOvalClipPath 及 CustomClipper裁剪布局Flutter中提供了一些剪裁widget，如下表格。widget作用ClipRect将 child 剪裁为给定的矩形大小ClipRRect将 child 剪裁为圆角矩形C

Flutter Navigator基础使用Navigator的使用分为两部分：本节说一些基本操作，如果你已经掌握了Navigator的基本跳转姿势1.路由最基本的使用-跳转和退出大多数App都包含了许多页面用来呈现不同种类的信息。例如：一个app可能存在“商品列表页”，当点击item的时候又会跳转到对应“商品详情”页面。在Flutter中，页面被称之为route（路由）。在android中路由等同于Activity，ios中路由等同于ViewController，然后在Flutter中路由只是一个

容器组件（Container）容器组件（Container）是一个组合Widget，内部有绘制Widget、定位Widget和尺寸Widget，包含一个子Widget,自身具备如alignment、pading等基础属性，方便布局过程中摆放child。Container组件常用属性如下表：属性名类型说明keyKeyContainer唯一表示符，用于查找更新alignmentAlignmentGeometry控制child的对齐方式，如果Container或Contai

Flutter文本框TextField目录参数详解代码示例[ 效果图](https://blog.youkuaiyun.com/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&

Flutter组件之按钮（RaisedButton）凸起按钮组件（RaisedButton）是Material Design中的button，一个凸起的材质矩形按钮，它可以响应按下事件，并且按下时会带一个触摸的效果。常用属性如下：属性名类型默认值说明colorColornull组件的颜色disabledColorColorThemeData.disabledColor组件禁用的颜色，默认为主题里的禁用颜色，也可以设置为其他颜色值onPressedVoi

Flutter SliverAppbar 控件介绍flutter SliverAppbar 控件介绍一、使用方法与CustomScrollView、NestedScrollView集成的材质设计应用栏。应用栏由工具栏和其他小部件组成，例如 TabBar和FlexibleSpaceBar。应用栏通常会使用IconButton公开一个或多个常见操作，后者可选地后跟 PopupMenuButton以进行不太常见的操作属性值描述leadingthis.leading,

Flutter Drawer 侧滑菜单、抽屉Drawer 与Scaffold一起使用。是Scaffold中drawer属性。drawer通常是一个ListView，它的第一个子视图是一个DrawerHeader，但我们通常使用UserAccountsDrawerHeader显示当前用户的状态信息。其余的drawer子元素通常由ListTile构造，通常以AboutListTile结束。可以使用Navigator.pop(context)主动关闭Drawer。参数讲解属性说明Dra

Flutter 控件之 MaterialAppMaterialApp 代表使用纸墨设计（Material Design）风格的应用。里面包含了纸墨设计风格应用所需要的基本控件。MaterialApp 主要属性如下：title在任务管理窗口中所显示的应用名字theme应用各种 UI 所使用的主题颜色color应用的主要颜色值（primary color），也就是安卓任务管理窗口中所显示的应用颜色home应用默认所显示的界面 Widgetroutes应用的顶级

BottomNavigationBar首先，bottomNavigationBar 是属于 Scaffold 中的一个位于底部的控件。通常和 BottomNavigationBarItem 配合使用BottomNavigationBar构造方法 BottomNavigationBar({ Key key, @required this.items, this.onTap, this.currentIndex = 0, BottomNavigationBarT

Flutter AppbarAppBar是一个顶端栏，对应着 Android 的 Toolbar。AppBar 有以下常用属性：属性类型描述leadingWidget在标题前面显示的一个控件，在首页通常显示应用的 logo；在其他界面通常显示为返回按钮。titleWidgetToolbar 中主要内容，通常显示为当前界面的标题文字。actionsList一个 Widget 列表，代表 Toolbar 中所显示的菜单，对于常用的菜单，通常使用 IconBu