Flutter顶部导航栏的实现

最新推荐文章于 2025-03-10 20:43:16 发布

studyovo_Hz

最新推荐文章于 2025-03-10 20:43:16 发布

阅读量422

点赞数

分类专栏： # Flutter 文章标签： flutter android

本文链接：https://blog.youkuaiyun.com/manerzi/article/details/128949037

版权

Flutter 专栏收录该内容

19 篇文章

订阅专栏

文章目录

- AppBar
- 顶部导航Tab

AppBar

在这里插入图片描述

顶部导航Tab

在这里插入图片描述


import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 2,
      child: Scaffold(
        appBar: AppBar(
          title: Text("Tab页面"),
          bottom: TabBar(
            tabs: [
              Tab(text: "热门"),
              Tab(text: "切换")
            ],
          ),
        ),
        body: TabBarView(
          physics: NeverScrollableScrollPhysics(), //禁止TabNarView滑动
          children: [
            ListView(
              children: [
                ListTile(
                  title: Text("第一个Tab"),
                ),
                ListTile(
                  title: Text("第一个Tab"),
                )
              ],
            ),
            ListView(
              children: [
                ListTile(
                  title: Text("第二个Tab"),
                ),
                ListTile(
                  title: Text("第二个Tab"),
                )
              ],
            )
          ],
          
          ),
      ),
    );
  }
}