flutter實現(xiàn)頭部tabTop滾動欄

更新時間：2022年03月22日 17:04:48 作者：舜岳

這篇文章主要為大家詳細(xì)介紹了flutter實現(xiàn)頭部tabTop滾動欄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了flutter實現(xiàn)頭部tabTop滾動欄的具體代碼，供大家參考，具體內(nèi)容如下

效果圖如下：

main.dart代碼如下：

import 'package:flutter/material.dart';
//啟動函數(shù)
void main() => runApp(MyApp());

//自定義組件
class MyApp extends StatelessWidget {
? @override
? Widget build(BuildContext context) {
? ? //MaterialApp 是flutter的頁面根組件
? ? return MaterialApp(
? ? ? title: 'main根頁面',
? ? ? debugShowCheckedModeBanner: false, ?//清除debug
? ? ? //home表示頁面信息
? ? ? home: AppbarTop()
? ? );
? }
}

//頭部tabTop滾動欄效果組件
import 'package:flutter/material.dart';

class AppbarTop extends StatefulWidget {
? @override
? _AppbarTopState createState() => _AppbarTopState();
}

//混合SingleTickerProviderStateMixin類 同步屬性
class _AppbarTopState extends State<AppbarTop>
? ? with SingleTickerProviderStateMixin {
? //定義一個控制器
? TabController _tabController;

? @override
? void initState() {
? ? super.initState();
? ? //混入SingleTickerProviderStateMixin的this
? ? //實例化一個tab控制器 作用：
? ? _tabController = TabController(length: choices.length, vsync: this);
? }

? _nextPage(index) {
? ? int currentIndex = _tabController.index + index;
? ? if (currentIndex < -0) currentIndex = _tabController.length - 1;
? ? if (currentIndex >= _tabController.length) currentIndex = 0;
? ? //控制器移動到currentIndex處
? ? _tabController.animateTo(currentIndex);
? }

? @override
? Widget build(BuildContext context) {
? ? return Scaffold(
? ? ? appBar: AppBar(
? ? ? ? title: Text('頭部菜單欄'),
? ? ? ? centerTitle: true, //title居中顯示
? ? ? ? leading: IconButton(
? ? ? ? ? ? icon: Icon(Icons.arrow_back),
? ? ? ? ? ? onPressed: () {
? ? ? ? ? ? ? _nextPage(-1);
? ? ? ? ? ? }),
? ? ? ? iconTheme: IconThemeData(color: Colors.yellow), //頭部icon樣式顏色
? ? ? ? //右邊icon圖標(biāo) 可以多個
? ? ? ? actions: <Widget>[
? ? ? ? ? IconButton(
? ? ? ? ? ? ? icon: Icon(Icons.arrow_forward),
? ? ? ? ? ? ? onPressed: () {
? ? ? ? ? ? ? ? _nextPage(1);
? ? ? ? ? ? ? })
? ? ? ? ],
? ? ? ? actionsIconTheme: IconThemeData(color: Colors.white),
? ? ? ? //自定義導(dǎo)航欄
? ? ? ? bottom: PreferredSize(
? ? ? ? ? ? child: Theme(
? ? ? ? ? ? ? data: Theme.of(context).copyWith(accentColor: Colors.white),
? ? ? ? ? ? ? child: Container(
? ? ? ? ? ? ? ? height: 40,
? ? ? ? ? ? ? ? alignment: Alignment.center, //圓點居中
? ? ? ? ? ? ? ? //給自定義導(dǎo)航欄設(shè)置圓點控制器
? ? ? ? ? ? ? ? child: TabPageSelector(
? ? ? ? ? ? ? ? ? controller: _tabController,
? ? ? ? ? ? ? ? ),
? ? ? ? ? ? ? ),
? ? ? ? ? ? ),
? ? ? ? ? ? preferredSize: Size.fromHeight(48)),
? ? ? ),
? ? ? //主體內(nèi)容
? ? ? body: TabBarView(
? ? ? ? //主題內(nèi)容也跟隨控制器變化
? ? ? ? controller: _tabController,
? ? ? ? //將數(shù)據(jù)遍歷成n個子組件數(shù)組
? ? ? ? children: choices.map((item) {
? ? ? ? ? return Padding(
? ? ? ? ? ? padding: EdgeInsets.all(20),
? ? ? ? ? ? child: ChoiceCard(
? ? ? ? ? ? ? choice: item,
? ? ? ? ? ? ),
? ? ? ? ? );
? ? ? ? }).toList(),
? ? ? ),
? ? );
? }
}

//ChoiceCard將數(shù)據(jù)渲染到Card卡片組件上
class ChoiceCard extends StatelessWidget {
? final Choice choice;
? const ChoiceCard({Key key, this.choice}) : super(key: key);

? @override
? Widget build(BuildContext context) {
? ? //滾動時的卡片小部件
? ? return Card(
? ? ? color: Colors.blue,
? ? ? child: Column(
? ? ? ? mainAxisAlignment: MainAxisAlignment.center,
? ? ? ? children: <Widget>[
? ? ? ? ? Icon(choice.icon, size: 120, color: Colors.white,),
? ? ? ? ? Text(choice.title),
? ? ? ? ],
? ? ? )
? ? );
? }
}


//數(shù)據(jù)的類型
class Choice {
? const Choice({this.title, this.icon});
? final String title;
? final IconData icon;
}
//模擬的數(shù)據(jù)
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),
];

效果圖2：

代碼如下：

//頭部tabTop滾動欄效果組件
class AppBarBottom extends StatefulWidget {
? AppBarBottom({Key key}) : super(key: key);

? @override
? _AppBarBottomState createState() => _AppBarBottomState();
}

class _AppBarBottomState extends State<AppBarBottom> {
? _SelectView(icon, text, id) {
? ? return PopupMenuItem(
? ? ? ? child: Row(
? ? ? mainAxisAlignment: MainAxisAlignment.spaceAround,
? ? ? children: <Widget>[
? ? ? ? Icon(icon, color: Colors.blue),
? ? ? ? Text(
? ? ? ? ? text,
? ? ? ? ? style: TextStyle(color: Colors.black),
? ? ? ? )
? ? ? ],
? ? ));
? }

? @override
? Widget build(BuildContext context) {
? ? //tab使用這個組件
? ? return DefaultTabController(
? ? ? ? length: choices.length,
? ? ? ? child: Scaffold(
? ? ? ? ? appBar: AppBar(
? ? ? ? ? ? title: Text('AppBar與TabBar'),
? ? ? ? ? ? centerTitle: true,
? ? ? ? ? ? actions: <Widget>[
? ? ? ? ? ? ? PopupMenuButton(
? ? ? ? ? ? ? ? ? shape: BeveledRectangleBorder(
? ? ? ? ? ? ? ? ? ? ? borderRadius: BorderRadius.circular(10)),
? ? ? ? ? ? ? ? ? itemBuilder: (BuildContext context) {
? ? ? ? ? ? ? ? ? ? return [
? ? ? ? ? ? ? ? ? ? ? PopupMenuItem(
? ? ? ? ? ? ? ? ? ? ? ? ? child: _SelectView(Icons.message, '首頁', 'A')),
? ? ? ? ? ? ? ? ? ? ? PopupMenuItem(
? ? ? ? ? ? ? ? ? ? ? ? ? child: _SelectView(Icons.message, '商品', 'B')),
? ? ? ? ? ? ? ? ? ? ? PopupMenuItem(
? ? ? ? ? ? ? ? ? ? ? ? ? child: _SelectView(Icons.message, '消息', 'C')),
? ? ? ? ? ? ? ? ? ? ];
? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? ],
? ? ? ? ? ? bottom: TabBar(
? ? ? ? ? ? ? isScrollable: true,
? ? ? ? ? ? ? indicatorSize: TabBarIndicatorSize.label,
? ? ? ? ? ? ? tabs: choices.map((item) {
? ? ? ? ? ? ? ? return Tab(
? ? ? ? ? ? ? ? ? text: item.title,
? ? ? ? ? ? ? ? ? icon: Icon(item.icon),
? ? ? ? ? ? ? ? );
? ? ? ? ? ? ? }).toList(),
? ? ? ? ? ? ),
? ? ? ? ? ),
? ? ? ? ? body: TabBarView(
? ? ? ? ? ? children: choices.map((item) {
? ? ? ? ? ? ? return Container(
? ? ? ? ? ? ? ? width: double.infinity,
? ? ? ? ? ? ? ? color: Colors.white70,
? ? ? ? ? ? ? ? child: Padding(
? ? ? ? ? ? ? ? ? padding: EdgeInsets.all(16),
? ? ? ? ? ? ? ? ? child: ChoiceCard(
? ? ? ? ? ? ? ? ? ? choice: item,
? ? ? ? ? ? ? ? ? ),
? ? ? ? ? ? ? ? ),
? ? ? ? ? ? ? );
? ? ? ? ? ? }).toList(),
? ? ? ? ? ),
? ? ? ? ));
? }
}

//ChoiceCard將數(shù)據(jù)渲染到Card卡片組件上
class ChoiceCard extends StatelessWidget {
? final Choice choice;
? const ChoiceCard({Key key, this.choice}) : super(key: key);

? @override
? Widget build(BuildContext context) {
? ? //滾動時的卡片小部件
? ? return Card(
? ? ? ? color: Colors.blue,
? ? ? ? child: Column(
? ? ? ? ? mainAxisAlignment: MainAxisAlignment.center,
? ? ? ? ? children: <Widget>[
? ? ? ? ? ? Icon(
? ? ? ? ? ? ? choice.icon,
? ? ? ? ? ? ? size: 120,
? ? ? ? ? ? ? color: Colors.white,
? ? ? ? ? ? ),
? ? ? ? ? ? Text(choice.title),
? ? ? ? ? ],
? ? ? ? ));
? }
}

//數(shù)據(jù)的類型
class Choice {
? const Choice({this.title, this.icon});
? final String title;
? final IconData icon;
}

//模擬的數(shù)據(jù)
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),
];

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: