* TabBarの(トップナビゲーション)
インポート 'パッケージ:フラッター/ material.dart' ;
クラス CategoryPageは延びStatefulWidgetを{
CategoryPage({キーキー}):スーパー(キー:キー)
@オーバーライド
_CategoryPageState createState() => _CategoryPageState();
}
クラス _CategoryPageStateは延び州<CategoryPageを> {
@オーバーライド
ウィジェットビルド(BuildContextコンテキスト){
リターンDefaultTabController(
長さ: 8 、
子供:足場(
アプリケーションバー:アプリケーションバー(
backgroundColorの:Colors.black12、
タイトル:行(
子供: <ウィジェット> [
拡張(
子供:TabBarに(
indicatorColor:Colors.red、
labelColor:Colors.black、
unselectedLabelColor:Colors.white、
isScrollable:真、
タブ: <ウィジェット> [
タブ(テキスト:「熱いです」)、
タブ(テキスト:「推奨」)、
タブ(テキスト:「コミュニティ」)、
タブ(テキスト:「推進」)、
タブ(テキスト:「ニュース」)、
タブ(テキスト:「ホットスポット」)、
タブ(テキスト: "淘宝" )、
タブ(テキスト: "知乎" )、
]、
)、
)
]、
)、
)、
ワンピース:タブビュー(
子供: <ウィジェット> [
カラム(
crossAxisAlignment:CrossAxisAlignment.start、
mainAxisAlignment:MainAxisAlignment.center、
子供: <ウィジェット> [
RaisedButton(
子供:テキスト(「フォームのページにジャンプし、値渡し」)、
onPressed:(){
// 共通ルート文言
// Navigator.of(コンテキスト)
// .push(MaterialPageRoute(ビルダー:(文脈)=> FormPage(タイトル: "私は値によってジャンプパスだ")));
// という名前のルート書き込み
Navigator.pushNamed(文脈、 '/フォーム' );
}、
色:Theme.of(コンテキスト).accentColor、
textTheme:ButtonTextTheme.primary、
)、
]、
)、
テキスト(「第三タブ」)、
テキスト(「第4タブ」)、
テキスト(「第五タブ」)、
テキスト(「第六のタブ」)、
テキスト(「第七タブ」)、
テキスト(「第八タブ」)、
テキスト(「第九タブ」)、
]、
)、
)、
);
}
}
レンダリング:
*カスタムTabControllerは、(上記のデフォルトTabControllerです)
増加させることができるカスタムのメリットは、状態SETSTATEを変更することでのaddListenerを聞きます
インポート 'パッケージ:フラッター/ material.dart' ;
クラス TabBarControllerPageは延びStatefulWidgetを{
TabBarControllerPage({キーキー}):スーパー(キー:キー)
@オーバーライド
_TabBarControllerPageState createState() => _TabBarControllerPageState();
}
クラス _TabBarControllerPageStateは、拡張状態<TabBarControllerPage>
with SingleTickerProviderStateMixin {
TabController _tabController;
@override
void dispose() {
super.dispose();
_tabController.dispose();
}
@override
void initState() {
super.initState();
_tabController = new TabController(
vsync: this,
length: 2,
);
_tabController.addListener(() {
print(_tabController.index);
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("TabBarControllerPage"),
bottom: TabBar(
controller: this._tabController,
tabs: <Widget>[
Tab(text: "热销"),
Tab(text: "推荐"),
],
),
),
body: TabBarView(
controller: this._tabController,
children: <Widget>[
Center(child: Text("热销")),
Center(child: Text("推荐")),
],
),
);
}
}
* Drawer(侧边栏)
import 'package:flutter/material.dart';
import 'tabs/Home.dart';
import 'tabs/Category.dart';
import 'tabs/Setting.dart';
class Tabs extends StatefulWidget {
final int index;
Tabs({Key key, this.index = 0}) : super(key: key);
@override
_TabsState createState() => _TabsState(index);
}
class _TabsState extends State<Tabs> {
int _currentIndex;
_TabsState(index) {
this._currentIndex = index;
}
List _pageList = [HomePage(), CategoryPage(), SettingPage()];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter Demo'),
),
body: this._pageList[this._currentIndex],
bottomNavigationBar: BottomNavigationBar(
currentIndex: this._currentIndex,
onTap: (int index) {
setState(() {
this._currentIndex = index;
});
},
// type: BottomNavigationBarType.fixed,//可以配置超过4个以上的icon
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text("首页"),
),
BottomNavigationBarItem(
icon: Icon(Icons.category),
title: Text("分类"),
),
BottomNavigationBarItem(
icon: Icon(Icons.settings),
title: Text("设置"),
),
],
),
//左侧边栏
drawer: Drawer(
child: Column(
children: <Widget>[
//头部
Row(
children: <Widget>[
Expanded(
child: DrawerHeader(
child: Text("你好Flutter"),
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(
"https://www.itying.com/images/flutter/2.png"),
fit: BoxFit.cover)),
),
)
],
),
ListTile(
leading: CircleAvatar(
child: Icon(Icons.home),
),
title: Text("我的空间"),
),
Divider(),
ListTile(
leading: CircleAvatar(
child: Icon(Icons.people),
),
title: Text("用户中心"),
),
Divider(),
ListTile(
leading: CircleAvatar(
child: Icon(Icons.settings),
),
title: Text("设置中心"),
),
Divider(),
],
),
),
//右侧边栏
endDrawer: Drawer(
child: Text("右侧侧边栏"),
),
);
}
}
效果图
* UserAccountsDrawerHeader (用户信息侧边栏)
import 'package:flutter/material.dart';
import 'tabs/Home.dart';
import 'tabs/Category.dart';
import 'tabs/Setting.dart';
class Tabs extends StatefulWidget {
final int index;
Tabs({Key key, this.index = 0}) : super(key: key);
@override
_TabsState createState() => _TabsState(index);
}
class _TabsState extends State<Tabs> {
int _currentIndex;
_TabsState(index) {
this._currentIndex = index;
}
List _pageList = [HomePage(), CategoryPage(), SettingPage()];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter Demo'),
),
body: this._pageList[this._currentIndex],
bottomNavigationBar: BottomNavigationBar(
currentIndex: this._currentIndex,
onTap: (int index) {
setState(() {
this._currentIndex = index;
});
},
// type: BottomNavigationBarType.fixed,//可以配置超过4个以上的icon
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text("首页"),
),
BottomNavigationBarItem(
icon: Icon(Icons.category),
title: Text("分类"),
),
BottomNavigationBarItem(
icon: Icon(Icons.settings),
title: Text("设置"),
),
],
),
//左侧边栏
drawer: Drawer(
child: Column(
children: <Widget>[
//头部
Row(
children: <Widget>[
Expanded(
child: UserAccountsDrawerHeader(
accountName: Text("用户King"),
accountEmail: Text("[email protected]"),
currentAccountPicture: CircleAvatar(
backgroundImage: NetworkImage(
"https://www.itying.com/images/flutter/3.png"),
),
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(
"https://www.itying.com/images/flutter/2.png"),
fit: BoxFit.cover),
),
otherAccountsPictures: <Widget>[
Image.network(
"https://www.itying.com/images/flutter/4.png"),
Image.network(
"https://www.itying.com/images/flutter/5.png"),
],
),
)
],
),
ListTile(
leading: CircleAvatar(
child: Icon(Icons.home),
),
title: Text("我的空间"),
),
Divider(),
ListTile(
leading: CircleAvatar(
child: Icon(Icons.people),
),
title: Text("用户中心"),
onTap: () {
Navigator.of(context).pop(); //隐藏侧边栏
Navigator.pushNamed(context, '/user');
},
),
Divider(),
ListTile(
leading: CircleAvatar(
child: Icon(Icons.settings),
),
title: Text("设置中心"),
),
Divider(),
],
),
),
//右侧边栏
endDrawer: Drawer(
child: Text("右侧侧边栏"),
),
);
}
}
效果图
* 各种按钮
import 'package:flutter/material.dart';
class ButtonPage extends StatelessWidget {
const ButtonPage({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("按钮页面"),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton(
child: Text("普通按钮"),
onPressed: () {
print("普通按钮");
},
),
SizedBox(width: 10),
RaisedButton(
child: Text("有颜色按钮"),
color: Colors.blue,
textColor: Colors.white,
onPressed: () {
print("有颜色按钮");
},
),
SizedBox(width: 10),
RaisedButton(
child: Text("有阴影按钮"),
color: Colors.blue,
textColor: Colors.white,
elevation: 20,
onPressed: () {
print("有阴影按钮");
},
),
],
),
SizedBox(height: 10),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton.icon(
icon: Icon(Icons.search),
label: Text("图标按钮"),
color: Colors.blue,
textColor: Colors.white,
onPressed: () {
print("按钮图标");
},
),
SizedBox(width: 10),
RaisedButton(
child: Text("圆角按钮"),
color: Colors.blue,
textColor: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10)),
onPressed: () {
print("圆角按钮");
},
),
SizedBox(width: 10),
Container(
height: 80,
child: RaisedButton(
child: Text("圆型按钮"),
color: Colors.blue,
textColor: Colors.white,
splashColor: Colors.yellow,
shape: CircleBorder(
side: BorderSide(
color: Colors.white,
)),
onPressed: () {
print("圆型按钮");
},
),
),
],
),
SizedBox(height: 10),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
width: 300,
height: 50,
child: RaisedButton(
child: Text("宽度按钮"),
color: Colors.blue,
textColor: Colors.white,
splashColor: Colors.yellow,
onPressed: () {
print("宽度按钮");
},
),
),
],
),
SizedBox(height: 10),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(
child: Container(
height: 50,
margin: EdgeInsets.all(10),
child: RaisedButton(
child: Text("自适应屏幕宽度按钮"),
color: Colors.blue,
textColor: Colors.white,
onPressed: () {
print("自适应屏幕宽度按钮");
},
),
),
)
],
),
SizedBox(height: 10),
FlatButton(
child: Text("flatbutton"),
color: Colors.blue,
textColor: Colors.yellow,
onPressed: () {
print("flatbutton");
},
),
SizedBox(height: 10),
//无背景色效果
OutlineButton(
child: Text("OutlineButton"),
color: Colors.blue, //没有效果
textColor: Colors.blue,
onPressed: () {
print("OutlineButton");
},
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
//按钮组
ButtonBar(
children: <Widget>[
RaisedButton(
child: Text("按钮1"),
onPressed: () {
print("按钮1");
},
),
RaisedButton(
child: Text("按钮2"),
onPressed: () {
print("按钮2");
},
),
MyButton(
text: "自定义按钮",
pressed: () {
print("自定义按钮");
},
)
],
)
],
)
],
),
);
}
}
//自定义按钮组件
class MyButton extends StatelessWidget {
final text;
final pressed;
const MyButton({this.text = '', this.pressed = null});
@override
Widget build(BuildContext context) {
return Container(
height: 50,
width: 120,
child: RaisedButton(
child: Text(this.text),
onPressed: this.pressed,
),
);
}
}
效果图
* 类似闲鱼app底部导航
import 'package:flutter/material.dart';
import 'tabs/Home.dart';
import 'tabs/Category.dart';
import 'tabs/Setting.dart';
class Tabs2 extends StatefulWidget {
final index;
Tabs2({Key key, this.index = 0}) : super(key: key);
_TabsState createState() => _TabsState(this.index);
}
class _TabsState extends State<Tabs2> {
int _currentIndex;
_TabsState(index) {
this._currentIndex = index;
}
List _pageList = [
HomePage(),
CategoryPage(),
SettingPage(),
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Flutter App"),
),
floatingActionButton: Container(
height: 80,
width: 80,
padding: EdgeInsets.all(8),
margin: EdgeInsets.only(top: 10),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(40),
color: Colors.white,
),
child: FloatingActionButton(
child: Icon(Icons.add),
onPressed: () {
setState(() {
//改变状态
this._currentIndex = 2;
});
},
backgroundColor: this._currentIndex == 2 ? Colors.red : Colors.yellow,
),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
body: this._pageList[this._currentIndex],
bottomNavigationBar: BottomNavigationBar(
currentIndex: this._currentIndex, //配置对应的索引值选中
onTap: (int index) {
setState(() {
//改变状态
this._currentIndex = index;
});
},
iconSize: 36.0, //icon的大小
fixedColor: Colors.red, //选中的颜色
type: BottomNavigationBarType.fixed, //配置底部tabs可以有多个按钮
items: [
BottomNavigationBarItem(icon: Icon(Icons.home), title: Text("首页")),
BottomNavigationBarItem(icon: Icon(Icons.message), title: Text("消息")),
BottomNavigationBarItem(
icon: Icon(Icons.category), title: Text("分类")),
BottomNavigationBarItem(icon: Icon(Icons.settings), title: Text("设置")),
BottomNavigationBarItem(icon: Icon(Icons.card_giftcard), title: Text("分享"))
],
),
drawer: Drawer(
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Expanded(
child: UserAccountsDrawerHeader(
accountName: Text("大地老师"),
accountEmail: Text("[email protected]"),
currentAccountPicture: CircleAvatar(
backgroundImage: NetworkImage(
"https://www.itying.com/images/flutter/3.png"),
),
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(
"https://www.itying.com/images/flutter/2.png"),
fit: BoxFit.cover,
)),
otherAccountsPictures: <Widget>[
Image.network(
"https://www.itying.com/images/flutter/4.png"),
Image.network(
"https://www.itying.com/images/flutter/5.png"),
],
))
],
),
ListTile(
leading: CircleAvatar(child: Icon(Icons.home)),
title: Text("我的空间"),
),
Divider(),
ListTile(
leading: CircleAvatar(child: Icon(Icons.people)),
title: Text("用户中心"),
onTap: () {
Navigator.of(context).pop(); //隐藏侧边栏
Navigator.pushNamed(context, '/user');
},
),
Divider(),
ListTile(
leading: CircleAvatar(child: Icon(Icons.settings)),
title: Text("设置中心"),
),
Divider(),
],
),
),
endDrawer: Drawer(
child: Text('右侧侧边栏'),
),
);
}
}
效果图
欢迎关注我的微信公众号:安卓圈