![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
flutter
flutter开发知识
qianyuan_666
这个作者很懒,什么都没留下…
展开
-
flutter层叠布局:Stack和Align、Positioned的使用
Stack结合Align和Positioned多用于无序或层叠的布局。其中,用Align的alignment组件和Positioned的top、left、right、bottom来实现对各组件的定位。这让我们可以让组件显示在任意位置,也可以将他们叠在一起。示例代码:class StackDemo extends StatelessWidget{ @override Widget ...原创 2020-03-08 14:45:36 · 822 阅读 · 0 评论 -
flutter组件:AspectRatio和Card组件
AspectRatioAspectRatio组件可以设置宽高比,多用于图片。其中通过设置aspectRatio的值来实现。示例代码:class TestDemo extends StatelessWidget{ @override Widget build(BuildContext context) { // TODO: implement build return ...原创 2020-03-08 15:44:38 · 237 阅读 · 0 评论 -
Flutter图片处理:加载本地图片、网络图片以及图片的拉伸、切圆
1.加载本地图片1.在项目根文件夹下新建images文件夹,再在images文件夹下新建2.0x、3.0x、4.0x这三个文件夹,将合适的图片分别放进这4个文件夹中,并保持名称相同。示例图:2.在yaml文件中配置图片示例图:3.在代码中加载本地图片示例:Container( height: 300, width: 300, chi...原创 2020-03-06 15:13:06 · 2761 阅读 · 0 评论 -
Flutter中ListView的应用
1.初始化示例: ListView( children: <Widget>[]);2.列表内容在列表内容中可以用ListTitle类来实现。在该类中可以用leading来设置左侧组件,用trailing来设置右侧组件用title来设置主要标题,用subtitle来设置子标题的内容。需要注意的是,在这些组件中,值是灵活多变的,可以是Text、Image等任...原创 2020-03-11 14:26:32 · 397 阅读 · 0 评论 -
flutter的布局组件:Row和Column
1.Row该组件中的子元素以水平排列2.Column该组件中的子元素以垂直排列在这两个组件中,都可以用mainAxisAlignment来设置主轴中子元素的排列效果。用crossAxisAlignment来设置次轴的排列效果。3.当我们需要等比排列子元素时,可以用Expand来实现。4.当我们需要设置边距时,可以用Padding或者SizedBox来实现。示例代码:class Ra...原创 2020-03-07 18:00:03 · 331 阅读 · 0 评论 -
flutter布局组件:wrap组件实现瀑布流
Wrap实现瀑布流效果direction: 主轴方向,默认为水平方向alignment: 主轴方向的对齐方式spacing: 主轴方向上的间距textDirection: 文本方向verticalDirection: 定义了children的摆放顺序,默认是downrunSpacing: 次轴方向上的间距runAlignment: 次轴的对齐方式示例代码:class WrapDe...原创 2020-03-09 15:23:10 · 1691 阅读 · 4 评论 -
flutter组件:GridView的使用说明
GrildView的使用情况GridView是宫格式布局,通常用于商城商品列表的展示。GridView的子组件1.crossAxisCount该组件用于设置每一行中的格子个数。2.crossAxisSpacing该组件用于设置GridView水平线上每个格子之间的距离3.mainAxisSpacing该组件用于设置GridView每一行格子之间的距离4.childAspectRa...原创 2020-03-07 17:11:33 · 339 阅读 · 0 评论