Warp组件 流式布局
（如app里的小标签）
- spacing 元素间距离（X轴）
- runSpacing 纵轴间距离
- alignment WrapAlignment 元素对齐方式
class MyButton extends StatelessWidget{
String text = "默认内容";
MyButton(this.text);
@override
Widget build(BuildContext context) {
// TODO: implement build
return ElevatedButton(
onPressed: (){
},
child: Text(this.text)
);
}
}
class Home extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Container(
padding: EdgeInsets.fromLTRB(8, 10, 8, 10),
child:Wrap(
spacing: 10,
runSpacing: 5,
children: [
MyButton("女装"),
MyButton("女装"),
MyButton("女装"),
MyButton("女装11"),
MyButton("女装"),
MyButton("女装"),
MyButton("女装2222"),
MyButton("女装"),
MyButton("女装111111"),
MyButton("女装"),
MyButton("女装"),
],
),
);
}
}
AspectRatio
- aspectRatio 配置宽高比 eg：2.0/1.0
Example
class Home extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return AspectRatio(aspectRatio: 2/1,
child:Container(
color: Colors.red,
),
);
}
}
//占满全宽 高度为宽度的一半Card组件
- margin 外边距
- child 子组件
- shape 阴影效果
简单例子
class Home extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return ListView(
children: [
Card(
margin: EdgeInsets.all(13),
child: Column(
children: [
ListTile(
title: Text("CC米饭",style: TextStyle(fontSize: 28),),
subtitle: Text('米饭鸭！！！'),
leading: Icon(Icons.unarchive_sharp),
),
],
),
)
],
);
}
}图文卡片
class Home extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return ListView(
children: [
Card(
child: Column(
children: [
AspectRatio(aspectRatio: 2/1,
child: Image.network("https://i0.hdslb.com/bfs/archive/08e9af7deb7ef87448095c2eba544c033232d061.jpg@336w_190h_1c.webp",fit: BoxFit.cover,),
),
ListTile(
title: Text('xxxxx'),
subtitle: Text("介绍呀啊啊啊啊啊"),
leading: ClipOval(
child: Image.network("https://i0.hdslb.com/bfs/archive/08e9af7deb7ef87448095c2eba544c033232d061.jpg@336w_190h_1c.webp",height: 60,width: 60,fit: BoxFit.cover,),
),
)
],
),
),
],
);
}
}圆图片实现2：
leading: CircleAvatar(
backgroundImage: NetworkImage('https://i0.hdslb.com/bfs/archive/08e9af7deb7ef87448095c2eba544c033232d061.jpg@336w_190h_1c.webp'),
),
#### 卡片加列表加动态数据 实例
class Home extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return ListView(
children: listDatas.map((e){
return Card(
child: Column(
children: [
AspectRatio(aspectRatio: 2/1,
child: Image.network(e["imageUrl"],fit: BoxFit.cover,),
),
ListTile(
title: Text(e['title']),
subtitle: Text(e['author']),
leading: CircleAvatar(
backgroundImage: NetworkImage(e["imageUrl"]),
),
)
],
),
);
}).toList(),
);
}
}路由
就是页面跳转
- 基本路由
- 命令路由
普通（基本）路由
eg.首页到搜索页面(Push方法)
import 'package:flutter/material.dart';
import 'res/listData.dart';
import './pages/Search.dart';
void main(){
runApp(MainHome());
}
class MainHome extends StatelessWidget {
const MainHome({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Home(),
);
}
}
class Home extends StatefulWidget {
const Home({Key? key}) : super(key: key);
@override
State<Home> createState() => _HomeState();
}
class _HomeState extends State<Home> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Home"),
),
body: Container(
child:
ElevatedButton(onPressed: (){
Navigator.of(context).push(
MaterialPageRoute(builder: (context)=>SearchPage())
);
}, child: Text("搜索"))
),
);
}
}
基本路由跳转
ElevatedButton(onPressed: (){
Navigator.of(context).push(
MaterialPageRoute(builder: (context)=>SearchPage())
);
传参
MaterialPageRoute(builder: (context)=>TextPage(ttt: '我的内容',))
----
String ttt = '表单';
TextPage({required this.ttt});
返回页面（POP方法）
eg 一个悬浮圆形按钮＋返回
floatingActionButton: FloatingActionButton(
child: Icon(Icons.back_hand_outlined),
onPressed: (){
Navigator.of(context).pop();
},
## 命名路由
略 待学习
TABBAR
使用 leading在前面添加 使用action在后面添加
eg
return Scaffold(
appBar: AppBar(
title: Text("AppBar"),
backgroundColor: Colors.red,
actions: [
IconButton(onPressed: (){
print('Seacrh');
}, icon: Icon(Icons.search))
],
),
body: Text('111'),
);
}
- centertitle 标题居中显示
顶部TabBar
一定要有DefaultTabController(length: length, child: child)
eg 仅添加TAb
return DefaultTabController(length: 2, child:
Scaffold(
appBar: AppBar(
title: Text("AppBar"),
backgroundColor: Colors.red,
bottom: TabBar(
tabs: [
Tab(text: '热门'),
Tab(text: '推荐'),
],
),
),
body: Text('111'),
),
);
要内容对应则这样
body: TabBarView(
children: [
ListView(
children: [
ListTile(title: Text("热门内容1！！")),
ListTile(title: Text("热门内容1！！")),
ListTile(title: Text("热门内容1！！")),
],
),
ListView(
children: [
ListTile(title: Text("推荐内容2！！")),
ListTile(title: Text("推荐内容2！！")),
ListTile(title: Text("推荐内容2！！")),
],
),
],
)
不显示标题栏则：
把要的东西放在title里面 eg：
Scaffold(
appBar: AppBar(
title: Row(
children: [
Expanded(child: TabBar(
tabs: [
Tab(text: '热门'),
Tab(text: '推荐'),
],
),)
],
),
backgroundColor: Colors.red,
),
body: TabBarView(
children: [
ListView(
children: [
ListTile(title: Text("热门内容1！！")),
ListTile(title: Text("热门内容1！！")),
ListTile(title: Text("热门内容1！！")),
],
),
ListView(
children: [
ListTile(title: Text("推荐内容2！！")),
ListTile(title: Text("推荐内容2！！")),
ListTile(title: Text("推荐内容2！！")),
],
),
],
)
),
- 指示器颜色 labelColor unselectedLableColor
- 指示器长度 indicatorSize: TabBarIndicatorSize.tab
另一种Tab切换方法
必须动态组件 还有多继承（with）
eg
class TabBarControllerpage extends StatefulWidget {
const TabBarControllerpage({Key? key}) : super(key: key);
@override
State<TabBarControllerpage> createState() => _TabBarControllerpageState();
}
class _TabBarControllerpageState extends State<TabBarControllerpage> with SingleTickerProviderStateMixin{
//Control配置
//1，继承类
//2.定义
//3.初始化触发方法
var _tabController;
@override
void initState() {
// TODO: implement initState
super.initState();
_tabController = new TabController(length: 2, vsync: this);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('TabBarControllerpage'),
bottom: TabBar(
//添加control
controller: this._tabController,
tabs: [
Tab(text: '热销',),
Tab(text: '推荐',),
],
),
),
body: TabBarView(
//配置control
controller: this._tabController,
children: [
Text('热销11111'),
Text('推荐2222')
],
),
);
}
}
事件监听
late TabController _tabController;
@override
void initState() {
// TODO: implement initState
super.initState();
_tabController = new TabController(length: 2, vsync: this);
//tab事件监听
_tabController.addListener((){
print(_tabController.index);
});
}
侧滑
最简单实例
Scaffold(
appBar: AppBar(
title: Text("Home"),
),
drawer: Drawer(
child: Text('Helllo'),
),
);
endDrawer 右侧侧边栏
- Divider组件 一根线
- DrawerHeader 头部组件（为侧滑加图片）
eg
drawer: Drawer(
child: Column(
children: [
Row(
children: [
Expanded(child: DrawerHeader(child:Text("头部")),)
],
),
ListTile(
leading: CircleAvatar(
child: Icon(Icons.home),
),
title: Text('我'),
),
ListTile(
leading: CircleAvatar(
child: Icon(Icons.settings),
),
title: Text('设置'),
),
ListTile(
leading: CircleAvatar(
child: Icon(Icons.face),
),
title: Text('朋友'),
)
],
)
),
顶部图片例子
DrawerHeader(
child:Text("头部"),
decoration: BoxDecoration(
//color: Colors.pink,
image: DecorationImage(
image: NetworkImage("URL")
)
),
),DrawerHeader(
child:Text("头部"),
decoration: BoxDecoration(
//color: Colors.pink,
image: DecorationImage(
image: NetworkImage("https://i0.hdslb.com/bfs/live/d7fdba9dd2eb76f1faf5a1ed998d4d8b0dc0ab9e.jpg@672w_378h_1c.webp",),
fit: BoxFit.cover
)
### 快速侧滑头部样式（UserAccountsDrawerHeader）
- accountName 设置大标题
- accountEmail 设置小标题
- currentAccountPicture 小图片
- otherAccountsPictures 右侧小图片·（没啥用）
完整实例
drawer: Drawer(
child: Column(
children: [
Row(
children: [
Expanded(
child:UserAccountsDrawerHeader(
currentAccountPicture: CircleAvatar(
backgroundImage: NetworkImage('url'),
),
decoration: BoxDecoration(
//color: Colors.pink,
image: DecorationImage(
image: NetworkImage("url")
)
),
accountName: Text('CC米饭'),
accountEmail: Text('233333'),
)
)
],
),
ListTile(
leading: CircleAvatar(
child: Icon(Icons.home),
),
title: Text('我'),
),
ListTile(
leading: CircleAvatar(
child: Icon(Icons.settings),
),
title: Text('设置'),
),
ListTile(
leading: CircleAvatar(
child: Icon(Icons.face),
),
title: Text('朋友'),
)
],
)
),
侧边栏点击事件
使用ontap
eg：
ListTile(
leading: CircleAvatar(
child: Icon(Icons.home),
),
title: Text('我'),
onTap: (){
print("hello");
},
),
使用Navigator.of(context).pop();关闭按钮
配置按钮颜色
- backgroundColor: MaterialStateProperty.all 按钮颜色
- foregroundColor: MaterialStateProperty.all文本颜色
- elevation: MaterialStateProperty.all(填数字)阴影颜色
eg
ElevatedButton(
onPressed: (){},
child: Text("122"),
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(Colors.blueGrey),
foregroundColor: MaterialStateProperty.all(Colors.white),
elevation: MaterialStateProperty.all(2),
),
)
图标按钮
ElevatedButton.icon(onPressed: (){},
icon: Icon(Icons.abc),
label: Text('附带的文字')
)
按钮宽度 高度
通过Container控制 (在Container中包含按钮)
Container(
height: 50,
width: 100,
child: ElevatedButton(
onPressed: (){},
child: Text('111'),
),
)自适应按钮
Expands中加Container再加按钮
圆角按钮
ElevatedButton(onPressed: (){},
child: Text('111'),
style: ButtonStyle(
shape: MaterialStateProperty.all(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20)
)
)
),
),
### 扁平按钮 TextButton、
### 边框按钮
#### 边框按钮设置边框颜色 宽度...
OutlinedButton(onPressed: (){},
child: Text("1111"),
style: ButtonStyle(
//字体颜色
foregroundColor: MaterialStateProperty.all(Colors.blueGrey),
//边框颜色 宽度
side: MaterialStateProperty.all(
BorderSide(
width: 1,
color: Colors.red
)
),
),
)
