flutter怎么實現頭部tabTop滾動欄

這篇文章主要介紹了flutter怎么實現頭部tabTop滾動欄的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇flutter怎么實現頭部tabTop滾動欄文章都會有所收獲，下面我們一起來看看吧。

效果圖如下：

main.dart代碼如下：

import 'package:flutter/material.dart';
//啟動函數
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圖標 可以多個
        actions: <Widget>[
          IconButton(
              icon: Icon(Icons.arrow_forward),
              onPressed: () {
                _nextPage(1);
              })
        ],
        actionsIconTheme: IconThemeData(color: Colors.white),
        //自定義導航欄
        bottom: PreferredSize(
            child: Theme(
              data: Theme.of(context).copyWith(accentColor: Colors.white),
              child: Container(
                height: 40,
                alignment: Alignment.center, //圓點居中
                //給自定義導航欄設置圓點控制器
                child: TabPageSelector(
                  controller: _tabController,
                ),
              ),
            ),
            preferredSize: Size.fromHeight(48)),
      ),
      //主體內容
      body: TabBarView(
        //主題內容也跟隨控制器變化
        controller: _tabController,
        //將數據遍歷成n個子組件數組
        children: choices.map((item) {
          return Padding(
            padding: EdgeInsets.all(20),
            child: ChoiceCard(
              choice: item,
            ),
          );
        }).toList(),
      ),
    );
  }
}

//ChoiceCard將數據渲染到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),
        ],
      )
    );
  }
}


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

效果圖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將數據渲染到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),
          ],
        ));
  }
}

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

關于“flutter怎么實現頭部tabTop滾動欄”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“flutter怎么實現頭部tabTop滾動欄”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。