Flutter布局基础——页面导航和返回
Flutter布局基础——页面导航和传值说到导航，最常见就是类似于iOS中导航控制器的push和pop效果，同样Flutter中也有类似的效果，使用的就是Navigator组件。 下面，来看一下在Flutter中，导航效果Navigator.push和Navigator.pop的使用。 简单使用代码如下： 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: '导航演示1', home: new FirstScreen(), ); }}class FirstScreen extends StatelessWidget { @o...
iOS RC4加密
iOS RC4加密iOS RC4加密的实现，要注意加密后生成字符串的步骤，有些要求是base64加密后输出，有些要求是字节数组转16进制字符串输出，所以要特别注意。 代码如下： 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125// rc4加密- (NSString *)rc4Encode:(NSString *)aInput key:(NSString *)aKey { NSMutableArray *iS = [[NSMutableArray alloc] initWithCapa...
Flutter组件基础——Button
Flutter组件基础——ButtonFlutter中常用的Button有ElevatedButton、TextButton、OutlinedButton，之前可能还有RaisedButton、FlatButton、OutlineButton，但是已被废弃，参考RaisedButton vs ElevatedButton, FlatButton vs TextButton and OutlineButton vs OutlinedButton TextButtonTextButton可简单理解为按钮，即可点击的Text。 常用属性如下： TextButton常用属性： autofocus child clipBehavior enabled focusNode onLongPress onPressed style 来看一下，定义三个按钮，分别对应，按钮不可点击，按钮可点击，按钮带有渐变背景，三种情况，效果如下： 使用代码如下： 123456789101112131415161718192021222324252627282930313233343536373839...
Flutter布局基础——Card
Flutter布局基础——CardCard，卡片式布局，带有一点圆角和阴影。通常用于关联信息的展示，比如：相册信息、经纬度、联系人信息等等。 Card的使用来看一下，如何做一个，常见的列表元素的控件，左侧是个Icon，上面是title，然后是desc，最下面是按钮，常见于订单列表。 要实现的效果如下： 然后看如何实现： ListTile这里需要介绍一下ListTile，Flutter提供的固定高度的，左侧或右侧带有Icon以及文案的控件。 可实现效果如下： 代码如下： 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home...
Flutter布局基础——Stack层叠布局
Flutter布局基础——Stack层叠布局层叠布局适用于子视图叠放一起，且位置能够相对于父视图边界确认的情况。 比如，可用于图片上加文字，按钮上加渐变阴影等等。 Stack Widget的子视图要么是positioned，要么是non-positioned。Positioned子视图是指使用Positioned的widget包括起来的子视图，通过设置相对于Stack的top、bottom、left、right属性来确认自身位置，其中至少要有一个不为空。 Stack Widget的大小取决于所有non-positioned的子视图。non-positioned的子视图的位置根据alignment属性确定，(当alignment为left-to-right时，子视图默认从左上角开始；当aligment为right-to-left时，子视图从右上角开始；)。 Stack 基础使用Stack常用属性 Stack常用属性 children：子视图 alignment：子视图的对齐方式 topLeft：顶部左对齐 topCenter：顶部居中对齐 topRight：顶部右对齐 cent...
Flutter布局基础——Column竖直布局
Flutter布局基础——Column竖直布局Column-是竖直方向布局子视图的Widget，和Row相似，如果想要子视图充满，可使用Expanded把子视图包括起来。 Column不能滑动（通常来说使用Column时，子视图内容不能超过父视图的高度），如果真的有很多子视图，需要滑动的时候，建议使用ListView。 如果想要横向布局，使用Row。 如果只有一个元素，可考虑使用Align或者Center来布局。 基础使用Column常用属性如下： Column常用属性 children: 子视图 textDirection: 子视图水平布局方向 TextDirection.ltr: 从左到右 TextDirection.rtl: 从右到左 verticalDirection: 子视图竖直布局方向 VerticalDirection.down: 从上到下，默认为这个 VerticalDirection.up: 从下到上 mainAxisSize: 子视图在父视图上竖直方向，占用大小 MainAxisSize.min: 最小，设置了这个之后，再设置mainAxisAl...
Flutter布局基础——Row水平布局
Flutter布局基础——Row水平布局Flutter中水平布局使用Row，可设置元素水平方向排列，如果想要子元素充满，可把子元素使用Expanded包括起来。 背景使用Row布局的Widget，不能滑动；通常使用Row布局的时候，默认所有的子元素加起来不能超过父视图的宽度。如果想要横向滑动，可考虑使用ListView。 Ps：当所有子元素的宽度超出了父视图Row的宽度后，会有警告。 如果想要竖向布局，使用Column。 如果只有一个元素，可考虑使用Align或者Center来布局。 基础介绍 Row常用属性 children: 子视图 textDirection: 子视图布局方向 TextDirection.ltr: 从左到右 TextDirection.rtl: 从右到左 mainAxisAlignment: 子视图在父视图上的布局方式，水平方向布局 MainAxisAlignment.spaceAround: 子视图之间和子视图距离父视图都留有间距 MainAxisAlignment.center: 所有子试图居中 MainAxisAlignment.end: 所...
Flutter组件基础——GridView
Flutter组件基础——GridViewGridView是网格布局，类似于iOS中的UICollectionView，可设置每行多少个、单个对象的宽高比、对象水平方向的间距、垂直方向的间距等等。 GridView的常用属性 GridView scrollDirection: 滑动方向 Axis.horizontal: 水平方向滑动 Axis.vertical: 垂直方向滑动，默认为这个。 padding: GridView相对于父视图的边距 crossAxisCount: 每行多少个 mainAxisSpacing: 与滑动方向垂直的方向的间距，eg: 当横向滑动时，这个代表垂直方向对象之间的间距； crossAxisSpacing: 与滑动方向平行的方向的间距，eg: 当横向滑动时，这个代表水平方向对象之间的间距； childAspectRatio：单个元素的宽高比(或者高宽比)，当scrollDirection为vertical时，代表宽高比；当scrollDirection为horizontal时，代表高宽比。 简单使用代码如下： 1234567891011...
Flutter组件基础——ListView
Flutter组件基础——ListViewListView是滚动列表，类似于iOS中ScrollView，可横向、纵向滚动，内容不限。 ListView的使用ListView的使用很简单，但是需要多多练习； ListView的使用，通过设置children来实现，children中的Item为Widget对象。 纵向滚动代码如下： 123456789101112131415161718192021222324252627282930313233343536373839class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'ListView Learn', home: Scaffold( appBar: new AppBar( tit...
Flutter组件基础——Image
Flutter组件基础——ImageImage是Flutter中的图片组件，类似于iOS中的UIImageView，可加载资源图片、网络图片、本地图片等，可设置拉伸方式，重复模式等。 Image加载方法Image的加载方法有以下几种： Image.asset，加载本地图片，比如打包到项目中的图片 Image.file，加载设备中的图片，比如存储到本地的图片 Image.memory，加载内存中的图片 Image.network，加载网络图片 使用方式各有不同，如下： Image.asset(name)是Image(image: AssetImage(name)) Image.file(path)是Image(image: FileImage(File(path))) Image.network(url)是Image(image: NetworkImage(url)) Image.memory(list)是Image(image: MemoryImage(list)) 而且： 使用asset images时，图片打包在apk或ipa中，会导致包变大加载时间对比：Net...