Flutter顶部导航栏的实现

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"),
                )
              ],
            )
          ],
          
          ),
      ),
    );
  }
}