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

Flutter应用实践：AppBar与TabBar组件详解

最新推荐文章于 2024-07-07 19:22:41 发布

原创

最新推荐文章于 2024-07-07 19:22:41 发布 · 567 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#flutter #学习

本文介绍了Flutter中AppBar的使用，包括设置标题、导航图标和操作按钮。接着讲解了如何结合TabBar和TabBarView实现菜单栏功能，通过TabController进行联动，并展示了相关属性的调整，如滚动、指示器颜色和大小等。

学习视频地址：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