Flutter封装组件之：常用标题组件

常用标题GRTitle组件

使用方法

GRTitle(
  leftTitle: '可点击右侧',
  leftIcon: Icon(Icons.bookmark_border),
  rightTitle: '换一换',
  onTap: (){print('1111');},
  rightIcon: Icon(Icons.refresh,color: Colors.black45,size: 18),
),
//设置颜色
GRTitle(
  leftTitle: '有图标标题',
  leftTitleColor: Colors.red,
  leftIcon: Icon(Icons.bookmark_border),
  rightTitle: '查看更多',
  rightIcon: Icon(Icons.chevron_right,color: Colors.black45),
  rightTitleColor: Colors.green,
),

组件参数

参数名	描述
leftTitle	左边标题
leftTitleSize	左边标题大小
leftTitleColor	左边标题颜色
leftIcon	左边图标
rightTitle	右边标题
rightTitleSize	右边标题大小
rightTitleColor	右边标题颜色
rightIcon	右边图标
onTap	右边可点击事件

组件源码

• 自定义标题组件 GRTitle

/**
 * author: jing
 * created on: 2022/12/24 15:40
 * description: 自定义标题组件
 */
import 'package:flutter/material.dart';
class GRTitle extends StatelessWidget {
  const GRTitle({
    Key? key,
    this.onTap,
    this.leftTitle = '左边标题',
    this.leftTitleColor = const Color(0xFF000000),
    this.leftIcon,
    this.rightTitle = '更多',
    this.rightTitleColor = const Color(0x8A000000),
    this.rightIcon,
    this.leftTitleSize = 16,
    this.rightTitleSize = 14,
  }) : super(key: key);
  //点击事件
  final VoidCallback? onTap;
  //左边标题
  final String leftTitle;
  //左边标题大小
  final double leftTitleSize;
  //左边标题颜色
  final Color leftTitleColor;
  //左边图标
  final Widget? leftIcon;
  //右边标题
  final String? rightTitle;
  //右边标题颜色
  final Color rightTitleColor;
  //右边标题大小
  final double rightTitleSize;
  //右边图标
  final Widget? rightIcon;
  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Row(
          children: [
            leftIcon ?? Container(),
            //如果觉得间距不够大可以加上
            // const SizedBox(width: 5.0),
            Text(leftTitle,style: TextStyle(fontSize: leftTitleSize,color: leftTitleColor),)
          ],
        ),
        GestureDetector(
          onTap:onTap,
          child: Row(
            children: [
              Text(rightTitle!,style: TextStyle(fontSize: rightTitleSize,color: rightTitleColor),),
              // const SizedBox(width: 5.0),
              rightIcon ?? Container(),
            ],
          ),
        )
      ],
    );
  }
}