无状态组件(StatelessWidget)是不可变的,这意味着它的属性不能改变,所有的值都是最终的。

有状态组件(StatefulWidget)持有的状态可能在Widget生命周期中发生变化。实现一个StatefulWidget至少需要两个类:一个StatefulWidget类,一个State类。StatefulWidget类本身是不变的,但是State类在Widget生命周期中始终存在。

一.容器组件Container:包含一个子Widget,自身具备如alignment、padding等基础属性,方便布局过程中摆放child。

二.图片组件Image:是显示图像的组件,Image组件有多种构造函数:

 new Image: 从ImageProvider获取图像
   new Image.asset: 加载资源图片
   new Image.file: 加载本地图片文件
   new Image.network: 加载网络图片
     new Image.memory: 加载Uint8List资源图片

三.文本组件text:负责显示文本和定义显示样式。

四.图标及按钮组件

1.图标组件Icon:为展示图标的组件,该组件不可交互,要实现可交互的图标,可以考虑使用IconButton组件。组件相关的组件有以下几个:

  IconButton: 可交互的Icon
  Icons: 框架自带Icon集合
  IconTheme: Icon主题
  ImageIcon: 通过AssetImages或者其他图片显示Icon

2.图标按钮组件IconButton:是基于Material Design风格的组件,它可以响应按下事件,并且按下时会带一个水波纹的效果。

 如果它的onPressed回调函数为null,那么这个按钮处于禁用状态,并且不可以按下。

3.凸起按钮组件RaisedButton:是Material Design中的Button,一个凸起的材质矩形按钮,它可以响应按下事件,并且按下时会带一个触摸的效果。

五.列表组件:

1.基础列表组件: ListView组件
2.水平列表组件: 把ListView组件的scrollDirection属性设置为Axis.horizontal即可
3.长列表组件: 使用ListView组件为基础,还需要添加一个列表项构造器itemBuilder。
4.网络列表组件: GridView组件,可以实现多行多列的应用场景。

六.表单组件

表单是一个包含表单元素的区域。表单元素允许用户输入内容,比如:文本域、下拉列表、单选框、复选框等。

表单里有两个重要的组件,一个是Form组件用来做整个表单提交使用的,另一个是TextFormField组件,用来做用户输入的。

七.Material Design风格组件:

1.App结构和导航组件:

MaterialApp 应用组件
Scaffold 脚手架组件
AppBar 应用按钮组件
BottomNavigationBar 底部导航条组件
TabBar 水平选项卡及视图组件
Drawer 抽屉组件

2.按钮和提示组件.

FloatingActionButton 悬停按钮组件
FlatButton 扁平按钮组件
PopupMenuButton 弹出菜单组件
SimpleDialog 简单对话框组件
AlertDialog 提示对话框组件
SnackBar 轻量提示组件

3.其他组件

TextField 文本框组件
Card 卡片组件

八.Cupertino风格组件:

1.CupertinoActivityIndicator组件
2.CupertinoAlertDialog对话框组件
3.CupertinoButton按钮组件
4.Cupertino导航组件集

Flutter 常用组件的更多相关文章

  1. Flutter常用组件(Widget)解析-ListView

    一个可滚动的列表组件 不管在哪,列表组件都尤为重要和常用. 首先来看个例子: import 'package:flutter/material.dart'; void main () => ru ...

  2. Flutter常用组件(Widget)解析-Container

    一个组件它往往包含了一些常见的painting, positioning和sizing这样的小部件. Container相当于我们常用的div,在Flutter中用的非常多,现在来看看Containe ...

  3. Flutter常用组件(Widget)解析-Text

    单一格式的文本. 文本组件是以字符串形式显示的单一格式,这个文本字符串可以是多行显示也可以是单独一行显示,主要取决于你的布局限制. 这样式内容是可选择的,如果你省略了,则会使用文本的默认样式来显示.如 ...

  4. Flutter常用组件(Widget)解析-Scaffold

    实现一个应用基本的布局结构. 举个栗子: import 'package:flutter/material.dart'; void main() => runApp(MyApp()); clas ...

  5. Flutter常用组件(Widget)解析-Image

    显示图片的组件 以下是几种加载图片路径方式: Image.asset 加载asset项目资源中的文件 Image.network 加载网络资源图片,通过url加载 Image.file 加载本地文件中 ...

  6. Flutter常用插件

    Dio Dio是一个强大的Dart Http请求库,支持Restful API.FormData.拦截器.请求取消等操作.视频中将全面学习和使用Dio的操作. Flutter_swiper swipe ...

  7. flutter Container组件和Text组件

    在开始之前,我们先写一个最简单的入口文件:     后面,都是在这个结构的基础上面完成的. 由于Container组件和Text组件都是写在body里面的,所以下面,先将body抽离成一个组件的形式. ...

  8. Flutter InkWell - Flutter每周一组件

    Flutter Inkwell使用详解 该文章属于[Flutter每周一组件]系列,其它组件可以查看该系列下的文章,该系列会不间断更新:所有组件的demo已经上传值Github: https://gi ...

  9. java基础 常用组件

    几个常用组件: 在图形用户界面编程中,我们常常会提供用户登陆界面,比如登陆到会员管理系统,登陆到工资管理系统,仓库管理系统等,如下图我们就会用到: 1. 文本框(JTextField) 2. 密码框( ...

随机推荐

  1. uniq cut wc 命令详解

    uniq uniq命令可以去除排序过的文件中的重复行,因此uniq经常和sort合用.也就是说,为了使uniq起作用,所有的重复行必须是相邻的. uniq语法 [root@www ~]# uniq [ ...

  2. BZOJ 4807 車 组合数学

    思路:高精度\((what)\) 提交:2次(后来发现有种更快的写法) 题解: 设\(n>m\),那么显然答案为\(C(n,m)\),相当于只能放\(m\)个棋子,可以在\(n\)列中选任意不同 ...

  3. 【csp模拟赛3】bridge.cpp--矩阵加速递推

    题目描述 穿越了森林,前方有一座独木桥,连接着过往和未来(连接着上一题和下一题...). 这座桥无限长. 小 Q 在独木桥上彷徨了.他知道,他只剩下了 N 秒的时间,每一秒的时间里,他会向 左或向右移 ...

  4. 转:关于C++ const 的全面总结

    转自:https://www.cnblogs.com/xkfz007/articles/2419518.html    如有侵权请联系博主,立即删除. C++中的const关键字的用法非常灵活,而使用 ...

  5. maven-jetty插件配置时,webdefault.xml的取得和修改

    取得 没必要去下载一个jetty客户端去找webdefault.xml了. 可以去maven的本地仓库找到 \org\eclipse\jetty\jetty-webapp\版本号\ 里面的jar文件, ...

  6. MySQL数据分析(7)-SQL的两大学习框架

    大家好,我是jacky,很高兴继续跟大家分享<MySQL数据分析实战>课程,前面的课程基本上我把MySQL的原理都做了一定的介绍,有好多朋友说学习MySQL是没有逻辑的,其实jacky是非 ...

  7. shell 显示详细信息

    MacdeMacBook-Pro:test macname$ ls -al | more total drwxr-xr-x macname staff : . drwxr-xr-x+ macname ...

  8. Java安全(加密、摘要、签名、证书、SSL、HTTPS)

    对于一般的开发人员来说,很少需要对安全领域内的基础技术进行深入的研究,但是鉴于日常系统开发中遇到的各种安全相关的问题,熟悉和了解这些安全技术的基本原理和使用场景还是非常必要的.本文将对非对称加密.数字 ...

  9. Golang 二维切片初始化

    package main import "fmt" func main() { // 方法0 row, column := 3, 4 var answer [][]int for ...

  10. Springboot使用zuul进行负载均衡

    完整项目代码地址参考:https://github.com/SimonHu1993/SpringbootZuul 1.这里我们使用Eureka来作为服务的注册与发现中心,首先看看Eureka clie ...