flutter實現頭部tabTop卷軸

2022-03-22 19:00:17

本文範例為大家分享了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),
];

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援it145.com。

flutter實現頭部tabTop卷軸

熱門文章