Flutter04-Widget初体验

初体验Widget

一. Widget
- 1.1. 万物皆是Widget
- 1.2. Material设计风格
二. 实例一 hello flutter
- 2.1. text
- 2.2. 居中
- 2.3. 添加导航栏
- 2.4. 改进
三. 案例二同意协议
- 3.1. 错误代码
- 3.2. 正确代码
四. 案例三 list列表
五. 案例四加减
六. StatefulWidget生命周期

一. Widget

1.1. 万物皆是Widget

Flutter整个应用程序中所看到的内容几乎都是Widget，甚至内边距的设置也是Widget；
Flutter中的Widget(小部件或者组件)，相当于iOS、Android中的控件，相当于Vue、React中的组件；但Fullter中Widget更彻底。

1.2. Material设计风格

material是Google公司推行的一套设计风格，或者叫设计语言、设计规范等；
里面有非常多的设计规范，比如颜色、文字的排版、响应动画与过度、填充等等；
在Flutter中高度集成了Material风格的Widget；

二. 实例一 hello flutter

2.1. text

import 'package:flutter/material.dart';void main() {// runApp(const MyApp());runApp(Text('hello flutter', textDirection: TextDirection.ltr));
}

2.2. 居中

void main() {// runApp(const MyApp());runApp(Center(child: Text('hello flutter', textDirection: TextDirection.ltr, style: TextStyle(fontSize: 30),)));
}

2.3. 添加导航栏

void main() {// runApp(const MyApp());runApp(MaterialApp(//material 风格home: Scaffold(//脚手架appBar: AppBar(//导航栏title: Text("第一个应用程序"),),body: Center(//主视图child: Text('hello flutter', textDirection: TextDirection.ltr, style: TextStyle(fontSize: 30),)),) ));
}

2.4. 改进

widget:
- 无状态的Widget: StatelessWidget
- 有状态的Widget: StatefulWidget
- StatefulWidget就是有状态的Widget。它在程序运行时，状态被允许发生改变，要想编写出能够被用户操作的App，就必须要使用StatefulWidget。

void main() {// runApp(const MyApp());runApp(MyApp());
}class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(//material 风格home: HomePage());}
}class HomePage extends StatelessWidget {@overrideWidget build(BuildContext context) {return Scaffold(//脚手架appBar: AppBar(//导航栏title: Text("第一个应用程序!"),),body: HHContentBody(),);}
}class HHContentBody extends StatelessWidget {@overrideWidget build(BuildContext context) {return Center(//主视图child: Text('hello flutter', textDirection: TextDirection.ltr, style: TextStyle(fontSize: 30),));  }
}

三. 案例二同意协议

所有的Widget被注解@immutable修饰，所有成员变量不可变

3.1. 错误代码

//所有的Widget被注解@immutable修饰，内部不可含有可变属性
class HHContentBody extends StatelessWidget {var flag = true;//错误写法@overrideWidget build(BuildContext context) {return Center(//主视图child: Row(//行mainAxisAlignment: MainAxisAlignment.center,//居中children: [Checkbox(value: flag, onChanged: (flag){ValueKey(flag);}),Text('同意协议'),],));}
}

3.2. 正确代码

void main() {// runApp(const MyApp());runApp(MyApp());
}/*** widget:* 有状态的Widget: StatefulWidget* 无状态的Widget: StatelessWidget*/class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(//material 风格home: HomePage());}
}class HomePage extends StatelessWidget {@overrideWidget build(BuildContext context) {return Scaffold(//脚手架appBar: AppBar(//导航栏title: Text("第一个应用程序!"),),body: HHContentBody(),);}
}class HHContentBody extends StatefulWidget {@overrideState<StatefulWidget> createState() {return HHContentBodyState();}
}//flag: 状态
class HHContentBodyState extends State<HHContentBody> {var flag = true;@overrideWidget build(BuildContext context) {return Center(child: Row(mainAxisAlignment: MainAxisAlignment.center,children: [Checkbox(value: flag, onChanged: (value){// flag = value!;print(flag);setState(() {flag = value!; });}),Text('同意协议')],),);}
}

四. 案例三 list列表

ListView 滚动视图
Column 垂直视图
decoration 装饰
padding 边距
crossAxisAlignment 交叉轴
SizedBox 中间件间隔

import 'package:flutter/material.dart';void main() {// runApp(const MyApp());runApp(MyApp());
}class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(home: HomePage());}
}class HomePage extends StatelessWidget {@overrideWidget build(BuildContext context) {// TODO: implement buildreturn Scaffold(appBar: AppBar(title: Text('title'),),body: HomeBody(),);}
}//ListView 滚动视图
class HomeBody extends StatelessWidget {@overrideWidget build(BuildContext context) {// TODO: implement buildreturn ListView(children: [HomeProductItem('title', 'desc', 'https://tva1.sinaimg.cn/large/006y8mN6gy1g72j6nk1d4j30u00k0n0j.jpg'),SizedBox(height: 8),HomeProductItem('title', 'desc', 'https://tva1.sinaimg.cn/large/006y8mN6gy1g72imm9u5zj30u00k0adf.jpg'),SizedBox(height: 8),HomeProductItem('title', 'desc', 'https://tva1.sinaimg.cn/large/006y8mN6gy1g72imqlouhj30u00k00v0.jpg'),],);}
}/**
Column 垂直视图
decoration 装饰
padding 边距
crossAxisAlignment 交叉轴
SizedBox 中间件间隔*/class HomeProductItem extends StatelessWidget {final String title;final String desc;final String imgUrl;HomeProductItem(this.title, this.desc, this.imgUrl);@overrideWidget build(BuildContext context) {final style1 = TextStyle(fontSize: 30, color: Colors.blue);final style2 = TextStyle(fontSize: 20, color: Colors.orange);return Container(padding: EdgeInsets.all(10),decoration: BoxDecoration(border: Border.all(width: 5, color: Colors.purple)),child: Column(crossAxisAlignment: CrossAxisAlignment.start,children: [Text(title, style: style1,),SizedBox(height: 8),Text(desc, style: style2,),SizedBox(height: 8),Image.network(imgUrl)],),);}
}

五. 案例四加减

mainAxisAlignment 主轴
state.widget.params state获取widget的属性


import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';void main() {// runApp(const MyApp());runApp(MyApp());
}class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(home: HomePage());}
}class HomePage extends StatelessWidget {@overrideWidget build(BuildContext context) {// TODO: implement buildreturn Scaffold(appBar: AppBar(title: Text('title'),),body: HomeBody(),);}
}class HomeBody extends StatefulWidget {final params = 'params';@overrideState<StatefulWidget> createState() {return _HomeBodyState();}
}//mainAxisAlignment 主轴
//state获取widget的属性
class _HomeBodyState extends State<HomeBody> {var num = 0;final style1 = TextStyle(fontSize: 20, color: Colors.red);@overrideWidget build(BuildContext context) {return Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: [Row(mainAxisAlignment: MainAxisAlignment.center,children: [ElevatedButton(onPressed: (){setState(() {num--;});}, child: Text('-', style: style1)),ElevatedButton(onPressed: (){setState(() {num++;});}, child: Icon(Icons.add)),],),Text('当前计数：$num', style: style1),Text(this.widget.params)],),);}}

六. StatefulWidget生命周期

StatefulWidget本身由两个类组成的：StatefulWidget和State

Flutter04-Widget初体验相关推荐

Flutter初体验（二）—— 创建第一个Flutter APP
Flutter初体验(二)--- 创建第一个Flutter APP 在第一篇文章 Flutter初体验(一)---Mac 安装配置,学习了配置 Flutter 开发环境,并运行了Demo项目,本篇根据 ...
Android开发初体验
Android开发初体验本次开发的应用能提出一道道问题,用户点击TRUE或者FALSE来回答问题,该应用则即时做出反馈. 一·该应用由一个activity和一个布局(layout)组成,我们先创建一 ...
苹果电脑安装python3密码_mac系统安装Python3初体验
前沿对于iOS开发不要随便拆卸系统自带的Python,因为有很多 library 还是使用 Python2.7. 1 安装Xcode 1.1 App Store 搜索Xcode 并安装 1.2 安装 ...
MapReduce编程初体验
需求:在给定的文本文件中统计输出每一个单词出现的总次数第一步: 准备一个aaa.txt文本文档第二步: 在文本文档中随便写入一些测试数据,这里我写入的是 hello,world,hadoop he ...
小程序缩放_缩放流星应用程序的初体验
小程序缩放 by Elie Steinbock 埃莉·斯坦博克(Elie Steinbock) 缩放流星应用程序的初体验 (First Experiences Scaling a Meteor Ap ...
wxWidgets刚開始学习的人导引（3）——wxWidgets应用程序初体验
wxWidgets刚開始学习的人导引全文件夹 PDF版及附件下载 1 前言 2 下载.安装wxWidgets 3 wxWidgets应用程序初体验 4 wxWidgets学习资料及利用方法指导 5 ...
用鸿蒙跑了个 “hello world”！鸿蒙开发初体验
点击上方蓝色"方志朋",选择"设为星标" 回复"666"获取独家整理的学习资料! 来源 | https://my.oschina.net/u ...
Windows Embedded Standard开发初体验(二)
支持Silverlight的Windows Embedded Standard 好了,完成安装之后,我们就可以来做Windows Embedded Standard的第一个操作系统镜像了.在开始菜单中 ...
深度探索Hyperledger技术与应用之超级账本初体验（附部署代码）
2019独角兽企业重金招聘Python工程师标准>>> 本章零基础地介绍了如何快速体验超级账本搭建的区块链网络,我们先绕过了比较复杂的初始化配置,用官方提供的fabric-sampl ...

Flutter04-Widget初体验

初体验Widget

一. Widget

1.1. 万物皆是Widget

1.2. Material设计风格

二. 实例一 hello flutter

2.1. text

2.2. 居中

2.3. 添加导航栏

2.4. 改进

三. 案例二同意协议

3.1. 错误代码

3.2. 正确代码

四. 案例三 list列表

五. 案例四加减

六. StatefulWidget生命周期

Flutter04-Widget初体验相关推荐

最新文章

热门文章

Flutter04-Widget初体验

初体验Widget

一. Widget

1.1. 万物皆是Widget

1.2. Material设计风格

二. 实例一 hello flutter

2.1. text

2.2. 居中

2.3. 添加导航栏

2.4. 改进

三. 案例二 同意协议

3.1. 错误代码

3.2. 正确代码

四. 案例三 list列表

五. 案例四 加减

六. StatefulWidget生命周期

Flutter04-Widget初体验相关推荐

最新文章

热门文章

三. 案例二同意协议

五. 案例四加减