基础组件

基础 widget

01、Text单一格式的文本

RichText:一个富文本Text,可以显示多种样式的text。

富文本显示。结合TextSpan组件一起使用

02、 Row, Column

可以让你在水平 ( Row ) 和垂直( Column ) 方向创建灵活的布局

row是横向分布的,那所有的元素就是沿着一条横着的主轴排列的,默认情况下,它们将整个轴布满,而轴一般来说是跟屏幕同宽或者同长,跟上一个案例一样。但是可以通过mainAxisSize设置轴的长度、mainAxisAlignment设置对齐关系、使用CrossAxisAlignment设置children在横轴中的定位 。column同理。

Column 不支持滚动,想支持滚动,需要考虑使用ListView

在Row 和 Column 里CrossAxis 和 Main Axis 是不一样的

Row 布局 设置  crossAxisAlignment 无效

Column 布局 设置  mainAxisAlignment 无效

03、Expanded

Expanded widget 能够包裹一个 widget 并强制其填满剩余空间,与 Flexible 非常相似。

Expanded必须要要结合Column或者Row一起使用,否则会报错。作用是动态调整 child 组件沿主轴的尺寸,比如填充剩余空间,比如设置尺寸比例。

04、SizedBox

这个可以用来调整大小,也可以用来创造空间。

与Container类似,但仅用于设置容器的宽高,如果需要设置背景色等,请使用Container

05、Spacer

如果要造空位,Spacer比楼上更合适一点,它可以用flex,且放在children中效果优先级高于mainAxisAlignment。

06、

icon

优势:

尺寸不管怎么变,图标本身都是清晰的,且没有锯齿,

可以修改颜色:

还支持传入图片 (icon: 'images/icon.png')

缺点:只能设置纯色,不能设置渐变色

Image

在放图片前先配置下。先创建assets文件夹,并补上俩子文件夹用于存放图标和图片;再将这俩文件夹写入

pubspec.yaml里。

Image.network

Image.asset

继承了ImageProvider的image加载组件

本地AssetImage

AssetImage('images/image_icon.png')

网络图:NetworkImage

NetworkImage('imageUrl')

文件中加载:Image.file

内存中加载:Image.memory


07、 Container

在没有限制的情况下,Container 大小会尽可能大,如果没有 height 的限制,这个 Container 将布满屏幕。

Container 需要遵守对齐方式,根据子项调整大小,尊重宽度、高度和约束,扩展以适合父项,尽可能小。

如果 widget 没有子项且没有对齐方式,但提供了高度、宽度或约束,Container 会尝试尽可能小,给定这些约束和父约束的组合。

08、 GridView

ListView

09、Stack

Stack 是定死的,不能像之前 ListView, Container 那样可以在内容数据溢出时可滚动。

可以剪切掉超出渲染框的子项,所以才有上面圆形头像的操作。

Stack:取代线性布局 (和Android中的LinearLayout相似),Stack允许子 widget 堆叠, 你可以使用 Positioned 来定位他们相对于Stack的上下左右四条边的位置。

010、

RaisedButton 点击带波纹效果,且有阴影

FloatButton: 没有背景

OutlineButton: 带边框按钮,点击时边框和背景颜色呈现高亮状态

FloatingActionButton:一般一个界面只有一个,用于分享,导航

TextButton是Flutter中的一个按钮组件,它用于创建一个简单的文本按钮,通常用于触发次要操作。TextButton是MaterialButton的一个子类,因此它遵循材质设计规范,并提供一些常见的按钮属性。

011、

Divider:一个逻辑1像素厚的水平分割线,两边都有填充

012、

Padding:一个widget, 会给其子widget添加指定的填充,设置内边距

Center:将其子widget居中显示在自身内部的widget

ConstrainedBox:对其子项施加附加约束的widget

Offstage:一个布局widget,可以控制其子widget的显示和隐藏。

013、

Scaffold

快速搭建页面框架的组件

014、Positioned绝对定位,一般跟Stack组件配合一起使用

Positioned.fill方法将填充 Stack 的整个空间

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,547评论 6 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,399评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,428评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,599评论 1 274
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,612评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,577评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,941评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,603评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,852评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,605评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,693评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,375评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,955评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,936评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,172评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,970评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,414评论 2 342

推荐阅读更多精彩内容