Flutter AppBar defines the top Tab switch (fixed)

(1) Realization effect and effect picture
Effect:
(1) The number of switching of this head is fixed, that is, it cannot slide left and right.
Similar to the tabs in html.
Effect picture:
Insert picture description here

(2) Implementation method
tab component
tabbarview component

(3) Code implementation The
following is all the code. If you want to run, you must write an entry function in main.dart, and write AppBarDemoPage() in the home position.

import 'package:flutter/material.dart';

//不可以左右滑动的头部选项卡效果
class AppBarDemoPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 2,//选项的个数必须和下面的内容匹配
      child: Scaffold(
        appBar: AppBar(
          title: Text("甜宠软妹"),
          centerTitle: true,
          backgroundColor: Colors.green,
          bottom: TabBar(
            indicatorColor: Colors.red, //指示器
            labelColor: Colors.red,
            unselectedLabelColor: Colors.white,
            indicatorSize: TabBarIndicatorSize.label, //选中的红色条
            tabs: <Widget>[
              Tab(text: "关注"),
              Tab(text: "推荐"),
            ],
          ),
        ),
        body: TabBarView(
          children: <Widget>[
            ListView(
              children: [
                ListTile(
                  title: Text("第一个tab"),
                ),
                ListTile(
                  title: Text("第一个tab"),
                ),
                ListTile(
                  title: Text("第一个tab"),
                )
              ],
            ),
            ListView(
              children: [
                ListTile(
                  title: Text("第二个tab"),
                ),
                ListTile(
                  title: Text("第二个tab"),
                ),
                ListTile(
                  title: Text("第二个tab"),
                ),  
              ],
            )
          ],
        ),
      ),
    );
  }
}

If there are multiple options and the width is not enough, how to realize the sliding switch?

Guess you like

Origin blog.csdn.net/weixin_45425105/article/details/111690481