效果.gif

1、自動(dòng)適應(yīng)寬度未做，文本都沒有難度喘批，但下面的指示器的移動(dòng)要獲取text的寬度有點(diǎn)麻煩昭灵，所以就偷懶個(gè)懶，暫時(shí)沒有做篮绿；
2硫朦、標(biāo)題用的row文黎，不能滿足多個(gè)（超出屏幕寬度）title的情況七冲，可以換成ListView痛倚，請(qǐng)問指示器 移動(dòng)的問題，怎么處理呢澜躺？
如果您有好的方法蝉稳，歡迎推薦

源碼

import 'package:flutter/material.dart';

class SpecialSubTitleWidget extends StatefulWidget {
  final List<String> titleList;
  //正常item的點(diǎn)擊回調(diào)
  final Function(dynamic) titleClickActionBlock;
  const SpecialSubTitleWidget({
    Key? key,
    required this.titleList,
    required this.titleClickActionBlock,
    // this.rowNumber = 4,
    // this.maxShowItemNumber = 0,
    // this.itemAspectRatio = 1.0,
    // this.mainAxisSpacing = 10.0,
    // this.crossAxisSpacing = 10.0,
    // this.itemTextFontSize = 14.0,
    // this.showMoreButton = false,
    // this.isCanScrollable = true,
    // this.moreButtonClickActionBlock,
    // this.backgroundColor,
    // this.itemBackgroundColor,
  }) : super(key: key);

  @override
  State<SpecialSubTitleWidget> createState() => _SpecialSubTitleWidgetState();
}

class _SpecialSubTitleWidgetState extends State<SpecialSubTitleWidget> {
  late List<SpecialTextButton> titleBtnList;
  late List<bool> buttonStates;
  int currentSelectIndex = 0;
  double indicatorLeft = 0;
  double itemW = 45;
  @override
  void initState() {
    titleBtnList = [];
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return pageItemBar();
  }

  Widget pageItemBar() {
    return Container(
      height: 50,
      color: Colors.white,
      padding: const EdgeInsets.symmetric(horizontal: 20),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Expanded(child: Row(children: creatTitleButtons(widget.titleList))),
          SizedBox(
            height: 3,
            width: double.infinity,
            child: Stack(
              children: [
                Positioned(
                  left: 0,
                  right: 0,
                  bottom: 0,
                  child: Container(
                    height: 1,
                    color: Colors.red,
                  ),
                ),
                Positioned(
                  left: indicatorLeft,
                    child: Container(
                        height: 3,
                        width: itemW,
                        decoration: const BoxDecoration(
                            color: Colors.blue,
                            borderRadius: BorderRadius.only(
                                topLeft: Radius.circular(4),
                                topRight: Radius.circular(4))))),
              ],
            ),
          )
        ],
      ),
    );
  }

//方法
  creatTitleButtons(List titles) {
    if (titles.isEmpty) {
      return;
    }
    //默認(rèn)所以按鈕不選中
    buttonStates = List.generate(titles.length, (index) => false);
    //默認(rèn)選中第一個(gè)
    buttonStates[currentSelectIndex] = true;

    titleBtnList = titles.map((e) {
      int index = titles.indexOf(e);
      return SpecialTextButton(
          titleStr: e,
          selected: buttonStates[index],
          index: index,
          onPressed: (newIndex) {
            widget.titleClickActionBlock(newIndex);
            setState(() {
              buttonStates[currentSelectIndex] = false;
              buttonStates[newIndex] = true;
              currentSelectIndex = newIndex;
              indicatorLeft = newIndex * itemW;
            });
          });
    }).toList();
    return titleBtnList;
  }
}

class SpecialTextButton extends StatefulWidget {
  final String titleStr;
  final Function(int) onPressed;
  final bool selected;
  final int index;
  final double fontSizeSele;
  final double fontSizeNormal;
  final Color colorSele;
  final Color colorNormal;
  //正常item的點(diǎn)擊回調(diào)

  const SpecialTextButton({
    Key? key,
    required this.titleStr,
    required this.onPressed,
    required this.selected,
    required this.index,
    this.fontSizeSele = 18,
    this.fontSizeNormal = 16,
    this.colorNormal = Colors.black,
    this.colorSele = Colors.blue,
  }) : super(key: key);

  @override
  State<SpecialTextButton> createState() => _SpecialTextButtonState();
}

class _SpecialTextButtonState extends State<SpecialTextButton> {
  late TextStyle normalStyle;
  late TextStyle selectStyle;

  @override
  void initState() {
    super.initState();
    normalStyle =
        TextStyle(fontSize: widget.fontSizeNormal, color: widget.colorNormal);//,decoration: TextDecoration.none
    selectStyle =
        TextStyle(fontSize: widget.fontSizeSele, color: widget.colorSele);//,decoration: TextDecoration.none
  }

  @override
  Widget build(BuildContext context) {
    return Material(child: GestureDetector(
        onTap: () => widget.onPressed(widget.index),
        child: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 5),
            child: Text(widget.titleStr,
                style: widget.selected ? selectStyle : normalStyle))));
  }
}

使用方法

child: SpecialSubTitleWidget(titleList: const ["應(yīng)用","本地","按鈕3"], titleClickActionBlock: (index){
              print("------------click: $index --------");
          }),