Flutter 常用组件
关注
分享
扫一扫
xsj_blog
这个作者很懒，什么都没留下…
展开
-
MaterialApp 详解
一、参数含义MaterialApp({ Key key, // 设备用于为用户识别应用程序的单行描述 this.title = '', // 应用程序默认路由的小部件,用来定义当前应用打开的时候，所显示的界面 this.home, // 在操作系统界面中应用程序使用的主色。 this.color, // 应用程序小部件使用的颜色。 this.theme, // 应用程序的...原创 2019-09-10 15:05:36 · 4494 阅读 · 0 评论 -
Row 和 Column 组件
一、Row 组件参数说明mainAxisAlignment: 主轴的排序方式crossAxisAlignment: 次轴的排序方式children: 组件子元素二、Column 组件参数说明mainAxisAlignment: 主轴的排序方式crossAxisAlignment: 次轴的排序方式children: 组件子元素...原创 2019-09-26 04:47:32 · 800 阅读 · 0 评论 -
Paddiing 组件
简介： 在 html 中常见的布局标签都有 padding 属性，但是 Flutter 中很多 Widget 是没有 padding 属性。这个时候我们可以用 Padding 组件处理容器与子元素直接的间距。一、参数说明：padding: padding 值, EdgeInsetss 设置填充的值child: 子组件二、示例代码：class LayoutDemo extends St...原创 2019-09-26 04:43:14 · 254 阅读 · 0 评论 -
Flutter - 3种方式实现圆形背景，圆形头像
一、Flutter 里面实现实现圆形剪切有3种方法：Container decoration 装饰器里设置圆形+圆角ClipOvalCircleAvatarClipOval 只能剪切图片，CircleAvatar 和 Container 能适配复杂视图,比如这样：第一种方法 Container：class EE extends StatelessWidget { @over...转载 2019-09-26 00:16:23 · 4689 阅读 · 0 评论 -
Image 组件
主要参数说明：alignment: 图片的对齐方式color: 设置图片的背景颜色，通常和 colorBlendMode 配合一起使用，这样可以是图片颜色和背景色混合。上面的图片就是进行了颜色的混合，绿色背景和图片红色的混合fit: fit 属性用来控制图片的拉伸和挤压，这都是根据父容器来的。 BoxFit.fill:全图显示，图片会被拉伸，并充满父容器。 BoxFit.c...原创 2019-09-26 00:07:55 · 535 阅读 · 0 评论 -
ListView 组件
简介： ListView是最常用的可滚动组件之一有三种构建方式：ListViewListView.builderListView.separated主要参数说明：scrollDirection: Axis.horizontal 水平列表 Axis.vertical 垂直列表padding: 内边距resolve: 组件反向排序children: 列表元素itemB...原创 2019-09-25 23:53:15 · 3786 阅读 · 1 评论 -
Text 组件
一、主要参数说明textAlign: 文本对齐方式（center 居中，left 左对齐，right 右对齐，justfy 两端对齐）textDirection: 文本方向（ltr 从左至右，rtl 从右至左）overflow: 文字超出屏幕之后的处理方式（clip裁剪，fade 渐隐，ellipsis 省略号）textScaleFactor: 字体显示倍率maxLines: 文...原创 2019-09-25 22:12:57 · 619 阅读 · 0 评论 -
Container 组件
一、主要参数说明：alignment: topCenter：顶部居中对齐 topLeft：顶部左对齐 topRight：顶部右对齐 center：水平垂直居中对齐 centerLeft：垂直居中水平居左对齐 centerRight：垂直居中水平居右对齐 bottomCenter 底部居中对齐 bottomLeft：底部居左对齐 bottomRig...原创 2019-09-25 22:02:05 · 1312 阅读 · 0 评论 -
GridView 详解
一、主要参数：属性类型说明scrollDirectionAxis滚动方法paddingEdgeInsetsGeometry内边距resolvebool组件反向排序crossAxisSpacingdouble水平子 Widget 之间间距mainAxisSpacingdouble垂直子 Widget 之间间距crossAxis...原创 2019-09-25 21:32:19 · 572 阅读 · 0 评论 -
Scaffold 详解
一、主要的属性说明appBar：显示在界面顶部的一个 AppBarbody：当前界面所显示的主要内容floatingActionButton： 在 Material 中定义的一个功能按钮。persistentFooterButtons：固定在下方显示的按钮。drawer：侧边栏控件bottomNavigationBar：显示在底部的导航栏按钮栏。可以查看文档：Flutter学习之制作...原创 2019-09-10 21:05:17 · 10335 阅读 · 1 评论 -
Expanded 组件
一、参数说明：Expanded 可以用在 Row 和 Column 布局中flex: 元素占整个父 Row /Column 的比例child: 子元素二、代码示例：import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidge...原创 2019-09-26 04:56:39 · 7146 阅读 · 1 评论