flutter TabController 简单使用

a.png

import 'package:flu_merchant/ui/widget/custom_navbar.dart';
import 'package:flutter/material.dart';


class ChargeCenter extends StatefulWidget {
  const ChargeCenter({Key? key}) : super(key: key);

  @override
  State createState() => _ChargeCenterState();
}

class _ChargeCenterState extends State {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: CustomNavBar(
        title: "充值中心",
      ),
      body: SingleChildScrollView(
        child: Container(
          child: Column(
            children: [
              Container(
                color: Colors.green,
                alignment: Alignment.center,
                height: 100, 
                child: Text('哈哈哈'),
              ),
              Container(
                child: _VideoBookMusicBookWidget(),
              ),
              Container(
                color: Colors.grey,
                height: 1000,
                alignment: Alignment.topCenter,
                child: Text("哈哈哈"),
              ),
            ],
          ),
        ),
      ),
    );
  }
}




class _VideoBookMusicBookWidget extends StatefulWidget {
  const _VideoBookMusicBookWidget({Key? key}) : super(key: key);

  @override
  State<_VideoBookMusicBookWidget> createState() => _VideoBookMusicBookWidgetState();
}

class _VideoBookMusicBookWidgetState extends State<_VideoBookMusicBookWidget>
    with SingleTickerProviderStateMixin {
  final List tabTxt = ['影视圈', '图书', '音乐'];
  late TabController _tabController;
  late Color selectColor, unSelectedColor;
  late TextStyle selectStyle, unSelectedStyle;
  late List tabWidgets;
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _tabController = TabController(length: tabTxt.length, vsync: this);
  } 
  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
    _tabController.dispose();
  }
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 200.0,
      child: DefaultTabController(
        length: tabTxt.length,
        child: Column(
          children: [
            Align(
              child: _tabbar(),
              alignment: Alignment.centerLeft,
            ),
            _tabView()
          ],
        ),
      ),
    );
  }
  Widget _tabbar() {
    selectColor = Colors.black;
    unSelectedColor = Color.fromARGB(255, 117, 117, 117);
    selectStyle = TextStyle(fontSize: 18, color: selectColor);
    unSelectedStyle = TextStyle(fontSize: 18, color: unSelectedColor);
    tabWidgets = tabTxt.map((e) {
      return Tab(
        height: 30,
        child: Text(e, style: TextStyle(fontSize: 15, color: Colors.red),),
      );
    }).toList();
    return TabBar(
      controller: _tabController,
      tabs: tabWidgets,
      isScrollable: true,
      indicatorColor: Colors.purple,
      indicatorSize: TabBarIndicatorSize.label,
      labelColor: selectColor,
      labelStyle: selectStyle,
      unselectedLabelColor: unSelectedColor,
      unselectedLabelStyle: unSelectedStyle,
    );
  }
  Widget _tabView() {
    return Expanded(
      child: TabBarView(
        controller: _tabController,
        children: [
          _tabBarItem(Colors.orange),
          _tabBarItem(Colors.red),
          _tabBarItem(Colors.blue),
        ],
      ),
    );
  }
  _tabBarItem(Color color) {
    return Container(
      height: 100,
      color: color,
    );
  }
}