这里记录我学习Flutter的笔记
图像
圆角图像
方法一
child: Container(
width:300,
height: 300,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30),
//圆角方法一
image: DecorationImage(
image:NetworkImage("https://www.riceshare.com/wp-content/uploads/2022/07/1657510345-GifCam1.gif"),
fit: BoxFit.cover,
),
方法2
child: ClipOval(
child: Image.network("https://www.riceshare.com/wp-content/uploads/2022/07/1657510812-%E5%9B%BE%E7%89%87.jpg.webp",
fit: BoxFit.cover,
),
列表
静态
列表属性
- scrolDirection Axis 列表垂直或水平
- padding EdgeInsetsGeometry 内边距
- resolve bool 组件反向排序
- children List
列表内容
最简单实例
return ListView(
children: [
//用在Listview里面
ListTile(
leading: Icon(Icons.settings,
color: Colors.yellow,
),
//添加图标
title: Text("这是今天的好内容!"),
subtitle: Text("简介1242464565435545675743254576897656345676543546854"),
trailing: Icon(...),
//在后面添加图标
),
ListTile(
title: Text("这是今2天的好内容!"),
subtitle: Text("简介1242464565435545675743254576897656345676543546854"),
),
ListTile(
title: Text("这是今3天的好内容!"),
subtitle: Text("简介1242464565435545675743254576897656345676543546854"),
),
//省略
],
//垂直列表
scrollDirection: Axis.vertical,
padding: EdgeInsets.all(12),
);
动态
实现方法
- 使用For循环实现
使用For循环方式
class Contains extends StatelessWidget{
//自定义一个方法使用For循环返回List
List<Widget> _getData(){
List<Widget> list = [];
for(var i = 0;i<20;i++){
list.add(ListTile(
title: Text('这是第$i个列表!!!'),
),);
}
return list.toList();
}
@override
Widget build(BuildContext context) {
// TODO: implement build
//设置一个ListView
return ListView(
children: this._getData(),
);
}
}
Map方法
ListData.dart文件
List listDatas=[
{
"title": 'Candy Shop',
"author":"Moanghs",
"imageUrl":'https://i0.hdslb.com/bfs/archive/08e9af7deb7ef87448095c2eba544c033232d061.jpg@336w_190h_1c.webp',
},
{
"title": 'Shop',
"author":"Dccansssghs",
"imageUrl":'https://i0.hdslb.com/bfs/archive/1c2e265ebc1a60a40f1444de325c83b7c30061cb.jpg@336w_190h_1c.webp',
},
{
"title": 'ssdShop',
"author":"adrghs",
"imageUrl":'https://i0.hdslb.com/bfs/archive/0eedab326cd1230c4f11586399f470825d7954cc.png@336w_190h_1c.webp',
},
{
"title": 'Candy Shop',
"author":"Moanghs",
"imageUrl":'https://i0.hdslb.com/bfs/archive/08e9af7deb7ef87448095c2eba544c033232d061.jpg@336w_190h_1c.webp',
},
{
"title": 'Shop',
"author":"Dccansssghs",
"imageUrl":'https://i0.hdslb.com/bfs/archive/1c2e265ebc1a60a40f1444de325c83b7c30061cb.jpg@336w_190h_1c.webp',
},
.........
];
import 'res/listData.dart';
class Contains extends StatelessWidget{
//Map方法
List<Widget> _getData(){
var tempList=listDatas.map((value){
return ListTile(
leading: Image.network(value["imageUrl"]),
title:Text(value["title"]),
subtitle: Text(value['author']),
);
});
return tempList.toList();
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return ListView(
children: this._getData(),
);
}
}
ListView.builder方法
import 'res/listData.dart';
class Contains extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return ListView.builder(
//列表长度
itemCount:listDatas.length,
itemBuilder: (context,index){
return ListTile(
//index是索引值 eg 0.1.2.3.4
title: Text(listDatas[index]['title']),
);
}
);
}
}
将Builder抽离
class Contains extends StatelessWidget{
Widget _getListData(context,index){
return ListTile(
//index是索引值 eg 0.1.2.3.4
title: Text(listDatas[index]['title']),
);
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return ListView.builder(
//列表长度
itemCount:listDatas.length,
//把._getListData赋值给 itemBuilder
itemBuilder: this._getListData
);
}
}
自定义按钮组件
class Home extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Iconcont(Icons.add,color: Colors.black,);
}
}
class Iconcont extends StatelessWidget{
double size=32.0;
Color color=Colors.white;
var icon;
Iconcont(this.icon,{this.color=Colors.white,this.size=32}){
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return Container(
height: 100,
width: 100,
color: Colors.red.shade500,
child: Center(
child: Icon(this.icon,color: this.color,size: this.size,),
),
);
}
}
Row布局 横向布局
- mainAxisAlignment 主轴(x)显示(Center...)
- crossAxisAlignment y轴
Column 垂直布局
与row大同小异 略...
主轴与Row互换
Expanded 布局 (flex布局)
类似于线性布局 平均分配内部的内容
class Home extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Row(
children: [
Expanded(
child: Iconcont(Icons.add,color: Colors.red,),
flex: 1,
),
Expanded(child: Iconcont(Icons.home,color: Colors.pink,),flex: 2,),
],
);
}
}
class Iconcont extends StatelessWidget{
double size=32.0;
Color color=Colors.white;
var icon;
Iconcont(this.icon,{this.color=Colors.white,this.size=32}){
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return Container(
height: 100,
width: 100,
color: this.color,
child: Center(
child: Icon(this.icon,color: Colors.white,size: this.size,),
),
);
}
}
实现宽度100%
width = MediaQuery.of(context).size.width
感谢分享,赞一个
我比较好奇你的验证:&(蛆音娘_偷看)
那个验证码其实不输入也可以评论(●'◡'●)