Flutter中的widget
class StatelessApp extends StatelessWidget{
///在build方法中通过嵌套其它Widget来构建UI,在构建过程中会递归的构建其嵌套的Widget
@override
Widget build(BuildContext context){
//嵌套 MaterialApp:封装了应用程序实现Material Design所需要的一些widget
returnMaterialApp(title:“Widget演示”,//标题,显示在recent时候的标题
//主页面
//Scaffold : Material Design布局结构的基本实现。
home:Scaffold(
//ToolBar/ActionBar
appBar:AppBar(title:Text(“Widget”)),
body:Text(“Hello,Flutter!”),
)
);
}
}
Material Design:
一种设计语言,Mater 《Android学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目实战源码讲义》无偿开源 徽信搜索公众号【编程进阶路】 ial Design 于2014年的 Google I/O 首次亮相,是谷歌推出的全新的设计语言。说白了,就是一种设计风格。
StatefulWidget
StatefulWidget是动态的,添加了一个新的接口 createState()用于创建和Stateful widget相关的状态 State,它在Stateful widget的生命周期中可能会被多次调用。
当State被改变时,可以手动调用其 setState()方法通知Flutter framework状态发生改变,Flutter framework在收到消息后,会重新调用其 build方法重新构建widget树,从而达到更新UI的目的。
State生命周期
State的生命周期为:
State类除了 build之外还提供了很多方法能够让我们重写,这些方法会在不同的状态下由Flutter调起执行,所以这些方法我们就称之为生命周期方法。在这里我们用statefulwidget点击按钮后移除子statefulwidget。
执行的输出结果显示为:
运行到显示
点击按钮会移除Child
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wMFko3FM-1651039633146)(https://upload-images.jianshu.io/upload_images/19956127-f6fbf5bbdcd8d851.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)]
将MyApp的代码由 child:isShowChild?Child():Text(“演示移除Child”),改为 child:Child(),点击按钮时
基础widget
文本显示
Text
Text是展示单一格式的文本Widget(Android TextView)。
在使用 Text显示文字时候,可能需要对文字设置各种不同的样式,类似Android的 android:textColor/Size等
在Flutter中也拥有类似的属性
RichText
如果需要显示更为丰富样式的文本(比如一段文本中文字不同颜色),可以使用 RichText或者 Text.rich
DefaultTextStyle
在widget树中,文本的样式默认是可以被继承的,因此,如果在widget树的某一个节点处设置一个默认的文本样式,那么该节点的子树中所有文本都会默认使用这个样式。相当于在Android中定义 Theme
FlutterLogo
这个Widget用于显示Flutter的logo…
Icon
主要用于显示内置图标的 Widget
Image
显示图片的 Widget。图片常用的格式主要有bmp,jpg,png,gif,webp等,Android中并不是天生支持gif和webp动图,但是这一特性在flutter中被很好的支持了。
Iamge.asset
在工程目录下创建目录,如:assets,将图片放入此目录。打开项目根目录:pubspec.yaml
Image.file
在sd卡中放入一张图片。然后利用path_provider库获取sd卡根目录(Dart库版本可以在:https://pub.dartlang.org/packages查询)。
注意权限
Image.network
直接给网络地址即可。
Flutter 1.0,加载https时候经常出现证书错误。必须断开AS打开app
Image.memory
CircleAvatar
主要用来显示用户的头像,任何图片都会被剪切为圆形。
FadeInImage
当使用默认 Image widget显示图片时,您可能会注意到它们在加载完成后会直接显示到屏幕上。这可能会让用户产生视觉突兀。如果最初显示一个占位符,然后在图像加载完显示时淡入,我们可以使用 FadeInImage来达到这个目的!
按钮
Material widget库中提供了多种按钮Widget如RaisedButton、FlatButton、OutlineButton等,它们都是直接或间接对RawMaterialButton的包装定制,所以他们大多数属性都和 RawMaterialButton一样。所有Material 库中的按钮都有如下相同点:
按下时都会有“水波动画”。
有一个 onPressed属性来设置点击回调,当按钮按下时会执行该回调,如果不提供该回调则按钮会处于禁用状态,禁用状态不响应用户点击。
RaisedButton
"漂浮"按钮,它默认带有阴影和灰色背景
会有“水波动画”。
有一个 onPressed属性来设置点击回调,当按钮按下时会执行该回调,如果不提供该回调则按钮会处于禁用状态,禁用状态不响应用户点击。
RaisedButton
"漂浮"按钮,它默认带有阴影和灰色背景
Flutter中的widget相关推荐
- 给Flutter中的Widget设置透明度
给Flutter中的Widget设置透明度 在项目开发中,需要经常用到透明度:比如在app中弹出一个提示框,这个时候的提示框就需要上下左右离边距有一定的距离,然后背景色舍黑色,需要设置透明度为0.4: ...
- element中有多个合计_深入理解 Flutter 中的 Widget, Element, RenderObject
这篇文章基于 Flutter stable v1.7 总结下 Flutter 当前的 UI 系统以及相关的概念, 在最后会通过自己组合一个 Gradient Button 按钮的方式来熟悉 Flutt ...
- Flutter 中 stateless 和 stateful widget 的区别[Flutter专题60]
Flutter 中 stateless 和 stateful widget 的区别 介绍 要在 Flutter 中构建任何应用程序,我们必须创建一个小部件类,它是 Flutter 应用程序的构建块.F ...
- Flutter中如何选择StatelessWidget和StatefulWidget
目录 StatelessWidget和StatefulWidget的区别 StatelessWidget StatefulWidget 区别 什么情况下应该用StatelessWidget?什么情况下 ...
- Flutter之基础Widget
原文博客地址: Flutter之基础Widget Flutter和Dart系列文章 项目GitHub地址 Flutter作为一种全新的响应式,跨平台,高性能, 完全免费.开源的移动开发框架 Widge ...
- Flutter中Padding、Row 、Column 、Expanded 组件详解
1. Paddiing 组件 在 html 中常见的布局标签都可以使用 padding 属性,但是 Flutter 中很多 Widget 是没有 padding 属 性,这个时候我们可以用 Paddi ...
- 说说Flutter中的Semantics
本篇是"说说"系列第二篇,另两篇链接奉上: 说说Flutter中的RepaintBoundary 说说Flutter中最熟悉的陌生人 -- Key Flutter中的Widget实 ...
- 如何在 Flutter 中禁用默认的 Widget 飞溅效果
如何在 Flutter 中禁用默认的 Widget 飞溅效果 默认情况下,许多 Flutter Material Design 小部件在被选中时会显示飞溅效果. 这适用于IconButton,InkW ...
- Flutter与JS的双向调用、Flutter中Widget与Html混合加载
题记 -- 执剑天涯,从你的点滴积累开始,所及之处,必精益求精. Flutter是谷歌推出的最新的移动开发框架. [x1]微信公众号的每日提醒 随时随记 每日积累 随心而过 [x2]各种系列的视频教程 ...
- Flutter中Widget 、Element、RenderObject角色深入分析
题记 -- 执剑天涯,从你的点滴积累开始,所及之处,必精益求精,即是折腾每一天. ** 你可能需要 CSDN 网易云课堂教程 掘金 EDU学院教程 知乎 Flutter系列文章 本文章将讲述 Widg ...
最新文章
- 多线程——生产者与消费者(多)1.5新锁,问题解决
- getpeername函数与getsockname函数的介绍
- 添加icon_Ubuntu下为AppImage应用添加图标并添加到应用
- html加粗字体打印失效_论文格式要求及字体大小
- leetcode - 226. 翻转二叉树
- vs2017运行yolov4_YOLOv4 C vs2017 编译
- 树磁盘[HBase] LSM树 VS B+树
- 旧计算机硬盘驱动器可以进口吗,解决方案:可以在新计算机上安装旧的机械硬盘驱动器吗?台式计算机添加新旧机械硬盘+分区教程...
- 清除电脑bios密码
- python实现自动拨打电话_python 实现手机自动拨打电话的方法(通话压力测试)
- 39. 组合总和(Python)
- 开源摄影测量与遥感处理软件OSSIM简介
- 线上云酒馆是什么?线上云酒馆怎么开发?
- 云计算在教育方面的应用
- php 复制文件夹并压缩到最小_【实用】PHP实现下载与压缩文件的一些方法的封装与整理...
- Android最牛的开源收集
- 超好用一键卸载软件和软件注册码
- js 自由变量的取值
- STC 下载 自动波特率 设计
- 首家中国精品店!英国当代珠宝品牌Stephen Webster入驻北京SKP购物中心
热门文章
- MySql高级索引、事务
- AR unity制作阴影
- 修复常见ACPI问题(DSDT等)
- android手机存储全面解析汇总
- 联发科Helio X23/27十核发布:性能大提升/优化双摄
- 信创干部人事档案管理系统单机版 - 人力资源档案管理系统软件
- 上古卷轴5:重制版窗口化运行1920*1080画面显示不全的问题解决
- 计算机硬盘有坏道,硬盘有坏道就不能用了吗?别再吃哑巴亏了,今天跟大家再说一次!...
- 数据结构排序之“九阳神功”
- 计161--Problem H: 求三角形面积-gyy