Flutter学习笔记17-AppBar、TabBar、TabBarView组合使用，实现头条效果的菜单栏

最新推荐文章于 2024-05-04 17:17:54 发布

刘景艺

最新推荐文章于 2024-05-04 17:17:54 发布

阅读量434

点赞数

分类专栏： Flutter学习笔记文章标签： flutter 学习

本文链接：https://blog.csdn.net/convex1009848621/article/details/127844078

版权

Flutter学习笔记专栏收录该内容

19 篇文章 0 订阅

订阅专栏

学习视频地址：https://www.bilibili.com/video/BV1S4411E7LY?p=36&spm_id_from=pageDriver&vd_source=cee744cae4ead27f8193fc7904647073

学习笔记
1.AppBar的简单使用

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(primarySwatch: Colors.blue),
      home: HomePage(),
    );
  }
}

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

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter demo"),
        backgroundColor: Colors.green,
        leading: IconButton(
          icon: Icon(Icons.person),
          onPressed: () {},
        ),
        actions: [
          IconButton(icon: Icon(Icons.search), onPressed: () {}),
          IconButton(icon: Icon(Icons.menu), onPressed: () {}),
        ],
      ),
    );
  }
}

效果
在这里插入图片描述

从左到右分别使用了：leading\title\actions属性
取消显示debug标签：
在这里插入图片描述

2.TabBar和TabBarView组合使用实现菜单栏
先混入SingleTickerProviderStateMixin

class _HomePageState extends State<HomePage>
    with SingleTickerProviderStateMixin

/// Provides a single [Ticker] that is configured to only tick while the current
/// tree is enabled, as defined by [TickerMode].
///
/// To create the [AnimationController] in a [State] that only uses a single
/// [AnimationController], mix in this class, then pass `vsync: this`
/// to the animation controller constructor.
///
/// This mixin only supports vending a single ticker. If you might have multiple
/// [AnimationController] objects over the lifetime of the [State], use a full
/// [TickerProviderStateMixin] instead.
@optionalTypeArgs
mixin SingleTickerProviderStateMixin<T extends StatefulWidget> on State<T> implements TickerProvider

理解Mixin \ with关键字：https://juejin.cn/post/6844903764441202702

我的理解是：
class A with B
相当于A可以调用B的方法，但B不是A的父类。

class _HomePageState extends State<HomePage>
    with SingleTickerProviderStateMixin {
  late TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 3, vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter demo"),
        backgroundColor: Colors.green,
        leading: IconButton(
          icon: Icon(Icons.person),
          onPressed: () {},
        ),
        actions: [
          IconButton(icon: Icon(Icons.search), onPressed: () {}),
          IconButton(icon: Icon(Icons.menu), onPressed: () {}),
        ],
        bottom: TabBar(
          controller: _tabController,
          tabs: [Text("推荐"), Text("新闻"), Text("视频")],
        ),
      ),
      body: TabBarView(
        controller: _tabController,
        children: [Text("推荐"), Text("新闻"), Text("视频")],
      ),
    );
  }
}

效果
在这里插入图片描述
重点是要初始化一个TabController
TabController是在initState()方法里初始化的
TabBar配置在AppBar的bottom
TabBarView配置在Scaffold的body
然后两个控件都要配置同一个controller：TabController _tabController = TabController(length: 3, vsync: this)

TabController初始化需要的vsync参数，就是我们需要with SingleTickerProviderStateMixin的原因

3.TabBar的其他属性概览
在这里插入图片描述
试一试

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

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage>
    with SingleTickerProviderStateMixin {
  late TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 3, vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter demo"),
        backgroundColor: Colors.green,
        leading: IconButton(
          icon: Icon(Icons.person),
          onPressed: () {},
        ),
        actions: [
          IconButton(icon: Icon(Icons.search), onPressed: () {}),
          IconButton(icon: Icon(Icons.menu), onPressed: () {}),
        ],
        bottom: TabBar(
          tabs: [Text("推荐"), Text("新闻"), Text("视频")],
          controller: _tabController,
          isScrollable: true,
          indicatorColor: Colors.red,
          indicatorWeight: 10,
          indicatorSize: TabBarIndicatorSize.tab,
          // indicatorPadding: EdgeInsets.all(2),
          labelColor: Colors.black,
          labelStyle: TextStyle(fontSize: 20),
          unselectedLabelColor: Colors.white,
          unselectedLabelStyle: TextStyle(fontSize: 10),
        ),
      ),
      body: TabBarView(
        controller: _tabController,
        children: [Text("推荐"), Text("新闻"), Text("视频")],
      ),
    );
  }
}