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 配置宽高比 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'),
),
</code></pre><p>#### 卡片加列表加动态数据 实例</p><pre><code>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())
);
</code></pre><p> 传参</p><pre><code>
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 在后面添加
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）
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")
)
),
),</code></pre><pre><code>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
)
),
),
)
Comments NOTHING