TabBar用到bottomNavigationBar

最新推荐文章于 2025-02-03 18:45:50 发布

转载最新推荐文章于 2025-02-03 18:45:50 发布 · 115 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/braveheart007/p/10792424.html

文章标签：

#移动开发

本文深入解析了使用Flutter框架构建的应用程序结构，展示了如何通过TabBar和TabBarView组件实现页面切换，以及如何利用StatefulWidget和State类管理状态。具体包括TabController的初始化和释放，以及与之配合的TabBar和TabBarView的使用方法。

import 'package:flutter/material.dart';
import 'homepage.dart';
import 'lastpage.dart';
import 'secondpage.dart';
import 'thirdpage.dart';

void main()=>runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> with SingleTickerProviderStateMixin{
  TabController _tabController;
  @override
  void initState() {
    // TODO: implement initState
    _tabController=TabController(length: 4, vsync: this);
    super.initState();
  }
  @override
  void dispose() {
    // TODO: implement dispose
    _tabController.dispose();
    super.dispose();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: Container(
        color: Colors.lime,
        child: TabBar(
          controller: _tabController,
          indicatorColor:Colors.orange,
          unselectedLabelColor:Colors.white,
          labelColor: Colors.orange,
          tabs: <Widget>[
            Tab(text: '业界动态',icon: Icon(Icons.update),),
            Tab(text: 'WIDGET',icon: Icon(Icons.settings),),
            Tab(text: '组件收藏',icon: Icon(Icons.favorite),),
            Tab(text: '关于手册',icon: Icon(Icons.book),),
          ],
        ),
      ),
      appBar: AppBar(
        title: Text('雷克萨斯'),
      ),
      body: TabBarView(
        controller: _tabController,
        children: <Widget>[
          MainPage(),
          SecondPage(),
          ThirdPage(),
          LastPage(),
        ],
      ),
    );
  }
}