06 页面布局 padding、Row、Column、Expanded
1、原始网格布局
2、padding
3、一个组建
4、Row 水平布局
5、column 垂直布局
6、expanded布局
1.）按照全是expanded
2.）一开始有一个 剩下的部分按照expanded
7 、我写的 但是最后一行还是有没有达到要求
8、视频实现
///06 页面布局 padding Row Colummn Expanded
/// 非常多 Row水平 Column垂直
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('表单ListTile'),
),
body: LayoutDome8()));
}
}
// 这个类 LayoutDome3-5 都会用到
class IconContainer extends StatelessWidget {
double iconSizee = 32.0;
Color iconColorr = Colors.white; //有原始值 可以不用一定传入数据
IconData iconn; //注意 icon的属性是IconData 不是Icon
Color bgColorr = Colors.red[300];
// 构造方法 icon为必须传入的参数 color和size可以不用 所以放在{}里面
IconContainer(this.iconn, {this.iconColorr, this.iconSizee, this.bgColorr});
@override
Widget build(BuildContext context) {
return Container(
height: 100.0,
width: 100.0,
color: this.bgColorr,
child: Center(
child: Icon(
this.iconn,
color: this.iconColorr,
size: this.iconSizee,
),
),
);
}
}
// -------------------==================================
// 视频实现
class LayoutDome8 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Padding(
padding: EdgeInsets.all(10),
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Expanded(
child: Container(
height: 180,
color: Colors.black,
child: Text('你好Flutter'),
),
)
],
),
SizedBox(height: 10),
Row(
children: <Widget>[
Expanded(
flex: 2,
child: Container(
height: 180,
child: Image.network(
"https://www.itying.com/images/flutter/2.png",
fit: BoxFit.cover),
)),
SizedBox(width: 10),
Expanded(
flex: 1,
child: Container(
height: 180,
child: ListView(
children: <Widget>[
Container(
height: 85,
child: Image.network(
"https://www.itying.com/images/flutter/3.png",
fit: BoxFit.cover),
),
SizedBox(height: 10),
Container(
height: 85,
child: Image.network(
"https://www.itying.com/images/flutter/4.png",
fit: BoxFit.cover),
)
],
))),
],
)
],
),
);
// ;
}
}
// -------------------==================================
// 7.例子 ----我写的
class LayoutDome7 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
height: 400.0,
color: Colors.grey[350],
padding: EdgeInsets.fromLTRB(10, 0, 10, 0),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Image.network(
'http://shp.qpic.cn/ishow/2735060319/1591183305_84828260_14686_sProdImgNo_6.jpg/0',
// height: 300,
// fit: BoxFit.cover,
),
Row(
// mainAxisAlignment: MainAxisAlignment.spaceEvenly,
// crossAxisAlignment : CrossAxisAlignment.center,
children: [
Expanded(
flex: 2,
child: Image.network(
'http://shp.qpic.cn/ishow/2735042809/1588039188_84828260_15570_sProdImgNo_6.jpg/0',
)),
SizedBox(width: 10),
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Image.network(
'http://shp.qpic.cn/ishow/2735080709/1596764439_84828260_7764_sProdImgNo_6.jpg/0'),
SizedBox(
width: 10,
),
Image.network(
'http://shp.qpic.cn/ishow/2735070311/1593748762_84828260_23096_sProdImgNo_6.jpg/0')
// Image.network(
// 'http://shp.qpic.cn/ishow/2735080709/1596764439_84828260_7764_sProdImgNo_6.jpg/0'),
],
),
flex: 1,
),
],
),
// Image.network(),
// Image.network(
// 'http://shp.qpic.cn/ishow/2735052109/1590023063_84828260_20731_sProdImgNo_5.jpg/0',
// ),
],
),
);
}
}
// -------------------==================================
// 6.Expanded 自适应布局 比例
class LayoutDome6 extends StatelessWidget {
// 1 全是expanded分派
Row _getWW01() {
return Row(
children: <Widget>[
Expanded(
flex: 1,
child: IconContainer(
Icons.sanitizer,
bgColorr: Colors.orange[200],
)),
Expanded(
flex: 2,
child: IconContainer(
Icons.people_rounded,
bgColorr: Colors.blue[200],
)),
],
);
}
// 2 一开始有一个按钮 后来expanded按照剩下的部分分配
Row _getWW02() {
return Row(
children: <Widget>[
// 一开始的 按照IconContainer方法里面的宽高布局
IconContainer(
Icons.featured_play_list,
bgColorr: Colors.red[200],
),
Expanded(
//除去一开始的 剩下的部分左侧占据一份
flex: 1,
child: IconContainer(
Icons.sanitizer,
bgColorr: Colors.orange[200],
)),
Expanded(
//右侧占据两份
flex: 2,
child: IconContainer(
Icons.search,
bgColorr: Colors.blue[200],
)),
],
);
}
@override
Widget build(BuildContext context) {
return this._getWW01();
}
}
// -------------------==================================
// 5.Colummn 垂直 和Row一样
class LayoutDome5 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
height: 400.0,
width: 400.0,
color: Colors.yellow[100],
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly, // spaceEvenly常用 均匀分配
crossAxisAlignment: CrossAxisAlignment.stretch, // stretch拉长;
children: <Widget>[
IconContainer(
Icons.search,
bgColorr: Colors.blue[200],
),
IconContainer(
Icons.home,
bgColorr: Colors.red[200],
),
IconContainer(
Icons.select_all,
bgColorr: Colors.orange[200],
),
],
),
);
}
}
// -------------------==================================
// Row 水平布局组建
// mainAxisAlignment: MainAxisAlignment.spaceEvenly, // spaceEvenly常用
class LayoutDome4 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
height: 400.0,
width: 400.0,
color: Colors.yellow[100],
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly, // spaceEvenly常用 均匀分配
crossAxisAlignment: CrossAxisAlignment.stretch, // stretch拉长;
children: <Widget>[
IconContainer(
Icons.search,
bgColorr: Colors.blue[200],
),
IconContainer(
Icons.home,
bgColorr: Colors.red[200],
),
IconContainer(
Icons.select_all,
bgColorr: Colors.orange[200],
),
],
),
);
}
}
// -------------------==================================
// 例子 组建 icon 一个
class LayoutDome3 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return IconContainer(
Icons.save,
bgColorr: Colors.blue[200],
iconColorr: Colors.pink[400],
);
}
}
// -------------------==================================
// padding
// 1. padding 2.child
class LayoutDome2 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Padding(
padding: EdgeInsets.fromLTRB(0, 0, 10, 0),
child: GridView.count(
crossAxisCount: 2,
childAspectRatio: 1.7,
children: <Widget>[
Padding(
padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
child: Image.network(
'https://www.itying.com/images/flutter/1.png',
fit: BoxFit.cover,
),
),
Padding(
padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
child: Image.network(
'https://www.itying.com/images/flutter/2.png',
fit: BoxFit.cover,
),
),
Padding(
padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
child: Image.network(
'https://www.itying.com/images/flutter/3.png',
fit: BoxFit.cover,
),
),
Padding(
padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
child: Image.network(
'https://www.itying.com/images/flutter/4.png',
fit: BoxFit.cover,
),
),
Padding(
padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
child: Image.network(
'https://www.itying.com/images/flutter/5.png',
fit: BoxFit.cover,
),
),
Padding(
padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
child: Image.network(
'https://www.itying.com/images/flutter/6.png',
fit: BoxFit.cover,
),
),
Padding(
padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
child: Image.network(
'https://www.itying.com/images/flutter/1.png',
fit: BoxFit.cover,
),
),
Padding(
padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
child: Image.network(
'https://www.itying.com/images/flutter/2.png',
fit: BoxFit.cover,
),
),
Padding(
padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
child: Image.network(
'https://www.itying.com/images/flutter/3.png',
fit: BoxFit.cover,
),
),
Padding(
padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
child: Image.network(
'https://www.itying.com/images/flutter/4.png',
fit: BoxFit.cover,
),
),
Padding(
padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
child: Image.network(
'https://www.itying.com/images/flutter/5.png',
fit: BoxFit.cover,
),
),
Padding(
padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
child: Image.network(
'https://www.itying.com/images/flutter/6.png',
fit: BoxFit.cover,
),
),
],
));
}
}
// -------------------==================================
// 原始网格
class LayoutDome1 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return GridView.count(
crossAxisCount: 2,
children: <Widget>[
Image.network('https://www.itying.com/images/flutter/1.png'),
Image.network('https://www.itying.com/images/flutter/2.png'),
Image.network('https://www.itying.com/images/flutter/3.png'),
Image.network('https://www.itying.com/images/flutter/4.png'),
Image.network('https://www.itying.com/images/flutter/5.png'),
Image.network('https://www.itying.com/images/flutter/6.png'),
Image.network('https://www.itying.com/images/flutter/1.png'),
Image.network('https://www.itying.com/images/flutter/2.png'),
Image.network('https://www.itying.com/images/flutter/3.png'),
Image.network('https://www.itying.com/images/flutter/4.png'),
Image.network('https://www.itying.com/images/flutter/5.png'),
Image.network('https://www.itying.com/images/flutter/6.png'),
],
);
}
}
07 页面布局 Stack 层叠组件 Stack 、 Align Stack 与 Positioned 实现定位布局
1.Stack 内含单个组件时可以 仅 stack
2.当内含有多个组件就的【stack + align
3. 多个时 [stack + Positioned]
///07 页面布局 Stack 层叠组件 【Stack + Align】 、 【Stack + Positioned】 实现定位布局
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('表单ListTile'),
),
body: LayoutDome3()));
}
}
// 堆叠组件 多个时 [stack + Positioned]
class LayoutDome3 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Container(
height: 400.0,
width: 300.0,
color: Colors.pink[100],
child: Stack(
children: [
Positioned(
// alignment: Alignment(0.9, 0.7),
left: 10,
top: 30,
child: Icon(
Icons.headset,
size: 80,
color: Colors.red[900],
),
),
Positioned(
bottom: 30,
child: Icon(
Icons.format_align_justify,
size: 60,
color: Colors.blue[200],
),
),
Positioned(
right: 30,
child: Icon(
Icons.wallet_membership,
size: 40,
color: Colors.yellow[200],
),
),
],
),
),
);
}
}
// 堆叠组件 多个时 [stack + align]
class LayoutDome2 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Container(
height: 400.0,
width: 300.0,
color: Colors.pink[100],
child: Stack(
// 堆叠组件
// alignment: Alignment.center,
// alignment: Alignment(1,-0.1), // 按照给定的Alignment(1,-0.1)，xy值 进行定位
children: [
Align(
alignment: Alignment(0.9, 0.7),
child: Icon(
Icons.headset,
size: 80,
color: Colors.red[900],
),
),
Align(
alignment: Alignment.center,
child: Icon(
Icons.format_align_justify,
size: 60,
color: Colors.blue[200],
),
),
Align(
alignment: Alignment(-0.7, -0.2),
child: Icon(
Icons.wallet_membership,
size: 40,
color: Colors.yellow[200],
),
),
],
),
),
);
}
}
// 堆叠组件 单个时 [stack]
class LayoutDome1 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
// 堆叠组件 stack的children里面的所有组件
// 按照排列顺序 alignment: Alignment.center,位置
// 进行堆叠
// 如果Text在Container前面 text就看不到了
child: Stack(
// 堆叠组件
// alignment: Alignment.center,
alignment: Alignment(1, -0.1), // 按照给定的Alignment(1,-0.1)，xy值 进行定位
children: [
Container(
height: 400.0,
width: 300.0,
color: Colors.pink[200],
),
Text(
'it is text',
style: TextStyle(color: Colors.white, fontSize: 40),
)
],
),
);
}
}
08 AspectRatio、Card 卡片组件
1） 单纯的卡片
2）图文卡片
3）引用res
///08 AspectRatio、Card 卡片组件
import 'package:flutter/material.dart';
import 'package:myapp01/res/listData.dart';
import 'res/listDataa.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('表单ListTile'),
),
body: LayoutDemo()));
}
}
class LayoutDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return ListView(
children: listDataa.map((value){
return Card(
margin: EdgeInsets.all(10),
child:Column(
children: <Widget>[
AspectRatio(
aspectRatio: 20/9,
child: Image.network(value["imageUrl"],fit: BoxFit.cover,),
),
ListTile(
leading: CircleAvatar(
backgroundImage:NetworkImage(value["imageUrl"])
),
title: Text(value["title"]),
subtitle: Text(value["description"],maxLines: 1,overflow: TextOverflow.ellipsis),
)
],
),
);
}).toList(),
);
}
}
// 引用res中的
class LayoutDome3 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ListView(
children: listData.map((value){
return Card(
margin: EdgeInsets.all(10),
child: Column(
children: [
AspectRatio(
aspectRatio: 20 / 9,
child: Image.network(
value["imageUrl"],
fit: BoxFit.cover,
),
),
ListTile(
// CircleAvatar 存粹处理头像
leading: CircleAvatar(
backgroundImage: NetworkImage(value["imageUrl"]),
),
title: Text(
value["title"],
),
subtitle: Text(
value["author"],
),
)
],
),
);
}).toList(),
);
}
}
// 图文卡片
class LayoutDome2 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ListView(
children: [
Card(
margin: EdgeInsets.all(10),
child: Column(
children: [
AspectRatio(
aspectRatio: 20 / 9,
child: Image.network(
'https://www.itying.com/images/flutter/1.png',
fit: BoxFit.cover,
),
),
ListTile(
leading: ClipOval(
child: Image.network(
'https://www.itying.com/images/flutter/1.png',
fit: BoxFit.cover,
width: 60,
height: 60,
),
),
title: Text(
'name:xxxx',
style: TextStyle(fontSize: 20),
),
subtitle: Text(
'phone:xxxxx',
style: TextStyle(fontSize: 15),
),
)
],
),
),
Card(
margin: EdgeInsets.all(10),
child: Column(
children: [
AspectRatio(
aspectRatio: 20 / 9,
child: Image.network(
'https://www.itying.com/images/flutter/2.png',
fit: BoxFit.cover,
),
),
ListTile(
// CircleAvatar 存粹处理头像
leading: CircleAvatar(
backgroundImage: NetworkImage(
'https://www.itying.com/images/flutter/2.png'),
),
title: Text(
'name:xxxx',
style: TextStyle(fontSize: 20),
),
subtitle: Text(
'phone:xxxxx',
style: TextStyle(fontSize: 15),
),
)
],
),
),
Card(
margin: EdgeInsets.all(10),
child: Column(
children: [
AspectRatio(
aspectRatio: 20 / 9,
child: Image.network(
'https://www.itying.com/images/flutter/3.png',
fit: BoxFit.cover,
),
),
ListTile(
leading: ClipOval(
child: Image.network(
'https://www.itying.com/images/flutter/3.png',
fit: BoxFit.cover,
width: 60,
height: 60,
),
),
title: Text(
'name:xxxx',
style: TextStyle(fontSize: 20),
),
subtitle: Text(
'phone:xxxxx',
style: TextStyle(fontSize: 15),
),
)
],
),
),
],
);
}
}
// 卡片组件
class LayoutDome1 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ListView(
children: [
Card(
margin: EdgeInsets.all(10),
// listView 里面不呢个在有listView
// 所以用colmun
child: Column(
children: [
ListTile(
title: Text(
"张三",
style: TextStyle(color: Colors.blue[300], fontSize: 30),
),
subtitle: Text(
"高级工程师",
style: TextStyle(color: Colors.orange[300]),
),
),
ListTile(
title: Text(
"电话：xxxx",
style: TextStyle(
color: Colors.blue[300],
),
),
leading: Icon(Icons.phone),
),
ListTile(
title: Text(
"邮箱：xinny@Gmail",
style: TextStyle(
color: Colors.blue[300],
),
),
leading: Icon(Icons.mail),
),
],
),
),
Card(
margin: EdgeInsets.all(10),
child: Column(
children: [
ListTile(
title: Text(
"李四",
style: TextStyle(color: Colors.blue[300], fontSize: 30),
),
subtitle: Text(
"高级工程师",
style: TextStyle(color: Colors.orange[300]),
),
),
ListTile(
title: Text(
"电话：xxxx",
style: TextStyle(
color: Colors.blue[300],
),
),
leading: Icon(Icons.phone),
),
ListTile(
title: Text(
"邮箱：xinny@Gmail",
style: TextStyle(
color: Colors.blue[300],
),
),
leading: Icon(Icons.mail),
),
],
),
),
Card(
margin: EdgeInsets.all(10),
child: Column(
children: [
ListTile(
title: Text(
"王五",
style: TextStyle(color: Colors.blue[300], fontSize: 30),
),
subtitle: Text(
"高级工程师",
style: TextStyle(color: Colors.orange[300]),
),
),
ListTile(
title: Text(
"电话：xxxx",
style: TextStyle(
color: Colors.blue[300],
),
),
leading: Icon(Icons.phone),
),
ListTile(
title: Text(
"邮箱：xinny@Gmail",
style: TextStyle(
color: Colors.blue[300],
),
),
leading: Icon(Icons.mail),
),
],
),
)
],
);
}
}
09 按钮 + Wrap组建
01 单纯的按钮
02 以前的ROw实现
03 这个rpw组建就可以换行
最常用 spacing: 10, // 最常用
runSpacing: 40, // 最常用
03外包一个container
///09 按钮 + Wrapz组建
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Wrap'),
),
body: LayoutDome04()));
}
}
// direction :主轴方向 --- V常用
// alignment ： 主轴对其方向
// spacing ： 主轴方向的艰巨
// runSpacing ： run的艰巨 --- V
// 在外面包裹一个container
// Wrap组建 可以换行
class LayoutDome04 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
height: 400,
width: 300,
color: Colors.pink[100],
padding: EdgeInsets.all(10),
child: Wrap(
spacing: 10, // 最常用
runSpacing: 40, // 最常用
alignment: WrapAlignment.spaceAround,
direction: Axis.vertical,
children: [
myButton("ttext"),
myButton("ddd"),
myButton("ss"),
myButton("cc"),
myButton("zz"),
myButton("vv"),
myButton("tt"),
myButton("rr"),
myButton("eeeew,"),
myButton("ttewwwxt"),
myButton("ttefgbxt")
],
),
);
}
}
// Wrap组建 可以换行
class LayoutDome03 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Wrap(
spacing: 10, // 最常用
runSpacing: 40, // 最常用
alignment: WrapAlignment.spaceAround,
children: [
myButton("ttext"),
myButton("ddd"),
myButton("ss"),
myButton("cc"),
myButton("zz"),
myButton("vv"),
myButton("tt"),
myButton("rr"),
myButton("eeeew,"),
myButton("ttewwwxt"),
myButton("ttefgbxt")
],
);
}
}
// 以前的Row主键
// 会出现无法换行的风险
class LayoutDome02 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Row(
children: [
myButton("ttext"),
myButton("ddd"),
myButton("ss"),
myButton("cc"),
myButton("zz"),
myButton("vv"),
myButton("tt"),
myButton("rr"),
myButton("eeeew,"),
myButton("ttewwwxt"),
myButton("ttefgbxt")
],
);
}
}
// 单个的按钮实现
class LayoutDome01 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return myButton('ddd');
}
}
class myButton extends StatelessWidget {
// 给他一个属性
final String ttext;
// 一件生辰之后是这个
// const myButton({Key key, this.ttext}) : super(key: key);
// 把this.ttext放到{}外面 表示 这个this.ttext 不是一个可选参数 是一个必须选参数
const myButton(
this.ttext, {
Key key,
}) : super(key: key);
// 以上是一个初始化代码 构造器
@override
Widget build(BuildContext context) {
return RaisedButton(
child: Text(this.ttext),
textColor: Theme.of(context).accentColor, //自定义它的颜色
onPressed: () {
// 接听RaisedButton的事件
},
);
}
}
10 自定义有状态组件
/// StatelessWidget：无状态组件
/// StatefulWidget ： 有状态组件
1.格式
2、 底下的控制台处变化 但是界面没有变化
3.
自己写了n变
import 'dart:collection';
///10 自定义有状态组件
/// StatelessWidget：无状态组件
/// StatefulWidget ： 有状态组件
///
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('表单ListTile'),
),
body: HomePage7()));
}
}
// 先实现button
class HomePage7 extends StatefulWidget {
HomePage7({Key key}) : super(key: key);
@override
_HomePage7State createState() => _HomePage7State();
}
class _HomePage7State extends State<HomePage7> {
List list = new List();
@override
Widget build(BuildContext context) {
return Container(
child: ListView(
children: [
RaisedButton(
child: Text('anniu'),
onPressed: () {
// 记得在on里面有set方法 在改变
setState(() {
this.list.add('11');
this.list.add('222');
this.list.add('3333');
});
},
),
SizedBox(
height: 30,
),
Column(
// 这里的children没有【】
// 注意return最后是；
// this的这个list 先变成了map
// 最后记得便会。toList
children: this.list.map((value) {
return ListTile(
title: Text(value),
);
}).toList(),
)
],
),
);
}
}
class HomePage6 extends StatefulWidget {
HomePage6({Key key}) : super(key: key);
@override
_HomePage6State createState() => _HomePage6State();
}
class _HomePage6State extends State<HomePage6> {
List listt = new List();
@override
Widget build(BuildContext context) {
return Container(
child: ListView(
children: [
RaisedButton(
onPressed: () {
setState(() {
this.listt.add('11');
this.listt.add('22');
this.listt.add('33');
});
},
child: Text('anniu'),
),
SizedBox(
height: 20,
),
Column(
children: this.listt.map((value) {
return ListTile(
title: Text(value),
);
}).toList(),
)
],
),
);
}
}
class HomePage5 extends StatefulWidget {
HomePage5({Key key}) : super(key: key);
@override
_HomePage5State createState() => _HomePage5State();
}
class _HomePage5State extends State<HomePage5> {
List ls = new List();
@override
Widget build(BuildContext context) {
return ListView(children: [
RaisedButton(
child: Text('aniu'),
onPressed: () {
setState(() {
this.ls.add("11");
this.ls.add("22");
this.ls.add("33");
});
}),
SizedBox(
height: 20,
),
Column(
children: this.ls.map((value) {
return ListTile(
title: Text(value),
);
}).toList(),
)
]);
}
}
// 有状态组件
class HomePage4 extends StatefulWidget {
HomePage4({Key key}) : super(key: key);
// 这里有个私有方法 调用了_HomePage4State界面
@override
_HomePage4State createState() => _HomePage4State();
}
// 这个界面继承了State 只有State才有set
class _HomePage4State extends State<HomePage4> {
int count = 0;
@override
Widget build(BuildContext context) {
return Column(
children: [
SizedBox(
height: 200,
),
Chip(label: Text('${this.count}')),
RaisedButton(
child: Text('aniu'),
onPressed: () {
setState(() {
this.count++;
print(count);
});
},
),
],
);
}
}
// 底下界面改变count 但是界面没有变
class HomePage3 extends StatelessWidget {
int count = 0;
@override
Widget build(BuildContext context) {
return Column(
children: [
SizedBox(
height: 200,
),
Text("${this.count}"),
RaisedButton(
child: Text('anniu'),
onPressed: () {
this.count++;
print(count);
},
),
],
);
}
}
// geshi
class HomePage2 extends StatelessWidget {
// int count = 0;
const HomePage2({Key key}) : super(key: key);
//自动生成是会有这个const HomePage2({Key key}) : super(key: key);
// 这个的意思是 表示这个是一个常量 就是不会变化的
// 所以在上面的int count = 0 得变成final int count = 0
// 但是我们的本意是为了点击一下按钮 让count++
// 所以不能这样写
// 而且因为是在StatelessWidget里面 表示的是无状态改变的界面
@override
Widget build(BuildContext context) {
return Column(
children: [
SizedBox(
height: 200,
),
Text('nihao'),
RaisedButton(
child: Text('anniu'),
onPressed: () {},
),
],
);
}
}
class HomePage1 extends StatelessWidget {
const HomePage1({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
child: Text('hhhh'),
);
}
}
4368
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
