Flutter 重复造轮子 (6) FullTitle 标题组件

详细可以访问仓库 HcUi: 重复创造Flutter 的轮子 在原有组件上拓展 展现出新的特性 (gitee.com)

介绍

可以快速构建一个全屏的标题组件 可以选择是否展示装饰

Screenshot_2023-09-13-16-10-11-0730967078.png

代码演示

基础用法

      HcFullTitle(
            title: "只有标题的标题(默认无点)",
          )

带副标题

          HcFullTitle(
            title: "标题",
            subtitle: "这里是副标题",
          ),

带点组件

HcFullTitle(
            showDot: true,
            title: "带点组件的标题",
            subtitle: "这里是副标题",
          ),

隐藏线的组件

          HcFullTitle(
            showDot: true,
            showLine: false,
            title: "带点组件的标题",
            subtitle: "这里是副标题",
          ),

副标题首字母大写

         HcFullTitle(
            showDot: true,
            showLine: false,
            title: "猜你喜欢",
            subtitle: "guess you like it",
            subTitleCapitalize: true,
          ),

修改颜色

          HcFullTitle(
            showDot: true,
            title: "猜你喜欢",
            subtitle: "guess you like it",
            subTitleCapitalize: true,
            color: Colors.pink,
          ),

自定义点或线组件

         HcFullTitle(
            showDot: true,
            // showLine: false,
            title: "猜你喜欢",
            subtitle: "guess you like it",
            dotWidget: Text("点"),
            lineWidget: Container(
              color: Colors.blue,
              width: double.infinity,
              height: 2,
            ),
            subTitleCapitalize: true,
          ),

API

props

参数	说明	类型	默认值	是否必填
title	标题	String?	-	false
subtitle	副标题	String?	-	false
titleStyle	标题文字样式	TextStyle	-	false
subtitleStyle	副标题文字样式	TextStyle	-	false
showDot	是否展示点组件	bool	false	false
dotWidget	自定义点组件	Widget	-	false
showLine	是否展示线组件	bool	true	false
lineWidget	自定义线组件	Widget?	-	false
padding	内边距	EdgeInsets?	EdgeInsets.all(18)	false
color	组件其他的颜色	Color	-	false
startAngle	点组件起始角度	double	90	false
subTitleCapitalize	副标题是否首字母大写	bool	true	false

项目源码

class HcFullTitle extends StatelessWidget {
  //标题
  final String? title;

  //副标题
  final String? subtitle;

  //标题样式
  final TextStyle titleStyle;

  //副标题样式
  final TextStyle subtitleStyle;

  //是否展示划线
  final bool showLine;

  //是否展示点
  final bool showDot;

  //点的组件
  final Widget? dotWidget;

  //线的自定义组件
  final Widget? lineWidget;

  //边框
  final EdgeInsets padding;

  //背景颜色
  final Color color;

  //起始角度
  final double startAngle;

  //副标题是否首字母大写
  final bool subTitleCapitalize;

  const HcFullTitle(
      {super.key,
      this.title,
      this.subtitle,
      this.titleStyle = const TextStyle(
        color: Colors.black,
        fontSize: HcFont.f18,
        fontWeight: FontWeight.bold,
      ),
      this.subtitleStyle = const TextStyle(
          fontSize: HcFont.f14,
          color: HcColor.defaultSubtitleColor,
          fontWeight: FontWeight.normal),
      this.showLine = true,
      this.showDot = false,
      this.dotWidget,
      this.padding = const EdgeInsets.all(18),
      this.color = Colors.green,
      this.startAngle = 0,
      this.subTitleCapitalize = true,
      this.lineWidget});

  @override
  Widget build(BuildContext context) {
    String? _subtitle =
        (subTitleCapitalize ? HcStringUtil.capitalizeStr(subtitle) : subtitle);
    return Padding(
      padding: padding,
      child: Row(
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          if (showLine) _buildLine(0),
          if (showDot) _buildDot(startAngle),
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 18),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                if (title != null)
                  Text(title!, style: titleStyle.copyWith(letterSpacing: 2.5)),
                if (_subtitle != null && _subtitle.isNotEmpty)
                  Text(
                    _subtitle,
                    style: subtitleStyle.copyWith(
                        color: subtitleStyle.color?.withOpacity(0.6)),
                  ),
              ],
            ),
          ),
          if (showDot) _buildDot(startAngle + 180),
          if (showLine) _buildLine(180),
        ],
      ),
    );
  }

  Widget _buildLine(transform) {
    return Expanded(
        child: Transform.rotate(
      angle: pi / 180 * transform,
      child: lineWidget ??
          Container(
            height: 1,
            decoration: BoxDecoration(
              gradient: LinearGradient(
                begin: Alignment.topLeft,
                end: Alignment.bottomRight,
                // 10% of the width, so there are ten blinds.
                colors: [Colors.white, color],
                // whitish to gray
                tileMode:
                    TileMode.repeated, // repeats the gradient over the canvas
              ),
            ),
          ),
    ));
  }

  Widget _buildDot(transform) {
    return Transform.rotate(
      angle: pi / 180 * transform,
      child: Transform.rotate(
          angle: pi / 9,
          child: dotWidget ??
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Container(
                    width: 4,
                    height: 15,
                    margin: const EdgeInsets.only(left: 5),
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(4),
                        color: (color).withOpacity(0.3)),
                  ),
                  Container(
                    width: 4,
                    height: 20,
                    margin: const EdgeInsets.only(left: 5, bottom: 5),
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(4), color: color),
                  ),
                ],
              )),
    );
  }
}