import 'package:flutter/material.dart';
import 'package:flutter_widget_demo/app.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
// return App();
return AppBarBottomWidget();
}
}
class AppBarBottomWidget extends StatefulWidget {
@override
State<StatefulWidget> createState() {
// TODO: implement createState
return AppBarBottomState();
}
}
class AppBarBottomState extends State<AppBarBottomWidget> with SingleTickerProviderStateMixin {
TabController tabController;
@override
void initState() {
super.initState();
tabController = new TabController(length: choices.length, vsync: this);
}
@override
void dispose() {
super.dispose();
tabController.dispose();
}
void _nextPage(int delta) {
final int nextIndex = tabController.index + delta;
if (nextIndex < 0 || nextIndex >= tabController.length) return;
tabController.animateTo(nextIndex);
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("滑動(dòng)選項(xiàng)卡"),
leading: IconButton(
icon: Icon(Icons.arrow_back),
onPressed: () {_nextPage(-1);},
),
actions: <Widget>[
IconButton(
icon: Icon(Icons.arrow_forward),
onPressed: (){_nextPage(1);},
),
],
bottom: PreferredSize(
preferredSize: Size.fromHeight(48.0),
child: Theme(
data: ThemeData(accentColor: Colors.white),
child: Container(
height: 48.0,
alignment: Alignment.center,
child: TabPageSelector(controller: tabController,),
),
),
),
),
body: TabBarView(
controller: tabController,
children: choices.map((Choice choice) {
return new Padding(
padding: const EdgeInsets.all(16.0),
child: ChoiceCardWidget(choice: choice,),
);
}).toList(),
),
),
);
}
}
class Choice {
final String title;
final IconData icon;
const Choice({this.title,this.icon});
}
const List<Choice> choices = const <Choice>[
const Choice(title: 'Car',icon: Icons.directions_car),
const Choice(title: 'Bicycle', icon: Icons.directions_bike),
const Choice(title: 'Boat', icon: Icons.directions_boat),
const Choice(title: 'Bus', icon: Icons.directions_bus),
const Choice(title: 'Train', icon: Icons.directions_railway),
const Choice(title: 'Walk', icon: Icons.directions_walk),
const Choice(title: 'Run', icon: Icons.directions_run),
const Choice(title: 'Eta', icon: Icons.drive_eta),
];
class ChoiceCardWidget extends StatelessWidget {
final Choice choice;
ChoiceCardWidget({Key key,this.choice}) : super(key : key);
@override
Widget build(BuildContext context) {
// TODO: implement build
return Padding(
padding: EdgeInsets.all(20.0),
child: Card(
color: Colors.white,
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(choice.icon,size: 200.0,color: Colors.blue,),
Padding(padding: EdgeInsets.only(bottom: 50.0),),
Text(choice.title,style: TextStyle(fontSize: 50.0),)
],
),
),
),
);
}
}
滑動(dòng)選項(xiàng)卡例子
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
- 文/潘曉璐 我一進(jìn)店門傍衡,熙熙樓的掌柜王于貴愁眉苦臉地迎上來深员,“玉大人,你說我怎么就攤上這事蛙埂【氤” “怎么了?”我有些...
- 文/不壞的土叔 我叫張陵绣的,是天一觀的道長(zhǎng)叠赐。 經(jīng)常有香客問我欲账,道長(zhǎng),這世上最難降的妖魔是什么燎悍? 我笑而不...
- 正文 為了忘掉前任敬惦,我火速辦了婚禮盼理,結(jié)果婚禮上谈山,老公的妹妹穿的比我還像新娘。我一直安慰自己宏怔,他們只是感情好奏路,可當(dāng)我...
- 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著臊诊,像睡著了一般鸽粉。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上抓艳,一...
- 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼位他!你這毒婦竟也來了氛濒?” 一聲冷哼從身側(cè)響起,我...
- 序言:老撾萬榮一對(duì)情侶失蹤鹅髓,失蹤者是張志新(化名)和其女友劉穎舞竿,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體窿冯,經(jīng)...
- 正文 獨(dú)居荒郊野嶺守林人離奇死亡炬灭,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
- 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了靡菇。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片重归。...
- 正文 年R本政府宣布椎木,位于F島的核電站违柏,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏香椎。R本人自食惡果不足惜漱竖,卻給世界環(huán)境...
- 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望畜伐。 院中可真熱鬧馍惹,春花似錦、人聲如沸玛界。這莊子的主人今日做“春日...
- 文/蒼蘭香墨 我抬頭看了看天上的太陽慎框。三九已至良狈,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間笨枯,已是汗流浹背薪丁。 一陣腳步聲響...
- 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像硫嘶,于是被迫代替她去往敵國(guó)和親阻问。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
推薦閱讀更多精彩內(nèi)容
- 選項(xiàng)卡 1.按鈕沦疾,列表 渲染2.點(diǎn)擊按鈕称近,切換列表顯示消失 實(shí)現(xiàn)細(xì)節(jié) 1.v-for實(shí)現(xiàn)按鈕輸出,通過v-for嵌...
- (簡(jiǎn)單記錄哮塞,有不正確的地方請(qǐng)指出)selenium+java可以實(shí)現(xiàn)對(duì)web頁面的自動(dòng)化控制刨秆,在公司內(nèi)部比較穩(wěn)定、...
- 1.home.html 2. home.ts import { Component,ViewChild } fro...
- 最終效果如上忆畅。問題:1衡未、tab標(biāo)題總共8個(gè),所以一屏無法全部顯示家凯。2缓醋、tab內(nèi)容區(qū)左右滑動(dòng)切換時(shí),tab標(biāo)題隨即做...
- 《wxml 代碼》 <view class='topSwiper'><view class='tab {{nav...