Flutter实现标题栏

Posted 2022-12-06 Xiao冰同学

使用Flutter封装标题栏

Flutter版本
1.22.0.stable

效果预览

实现思路

组件封装

封装文本组件 text_common.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class TextCommon extends StatelessWidget 
  final String text;
  final Color color;
  final double size;
  final bool bold;
  final bool softWrap;
  final bool medium;
  final bool heavy;
  final bool center;
  final int maxLines;
  final TextDecoration decoration;
  final double height;
  final TextStyle style;

  TextCommon(this.text,
      this.color,
        this.size,
        this.bold: false,
        this.heavy: false,
        this.softWrap: false,
        this.center: false,
        this.medium: false,
        this.maxLines,
        this.decoration,
        this.height, this.style);

  @override
  Widget build(BuildContext context) 
    return Text(
      text,
      textAlign: center ? TextAlign.center : TextAlign.start,
      maxLines: maxLines,
      overflow: TextOverflow.ellipsis,
      softWrap: softWrap,
      style: style ?? TextStyle(
        decoration: decoration,
        color: color ?? Color(0xFF666666),
        fontSize: size ?? 14,
        fontWeight: heavy
            ? FontWeight.w900
            : (bold
            ? FontWeight.bold
            : (medium ? FontWeight.w500 : FontWeight.normal)),
        height: height ?? 1.4,
      ),
    );
  

封装导航栏组件 app_bar_left_title.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'text_common.dart';

@immutable
class AppBarLeftTitle extends StatelessWidget implements PreferredSizeWidget 
  final String title;
  final bool hasBack;
  final bool isWhiteBack;
  final String right;
  final VoidCallback onTap;
  final Widget centerWidget;
  final Widget leading;
  final Color rightColor;
  final Widget rightWidget;
  final Color backgroundColor;
  final bool showDividerHorizontal;
  final Widget bottomWidget;
  final bool isCenterTitle;
  final double titleSize;
  final double height;

  AppBarLeftTitle(
      Key key,
      this.backgroundColor,
      @required this.title,
      this.isWhiteBack = true,
      this.hasBack,
      this.right,
      this.onTap,
      this.centerWidget,
      this.rightColor,
      this.rightWidget,
      this.showDividerHorizontal = true,
      this.leading,
      this.bottomWidget,
      this.isCenterTitle: true,
      this.titleSize: 18.0,
      this.height: 44.0)
      : super(key: key);

  @override
  Widget build(BuildContext context) 
    bool canPop = ModalRoute.of(context)?.canPop ?? false;
    return AppBar(
      elevation: 0,
      titleSpacing: 0,
      centerTitle: isCenterTitle,
      backgroundColor: Colors.black,
      actions: rightWidget != null
          ? [
              Padding(
                padding: EdgeInsets.only(right: 8),
                child: Center(
                  child: rightWidget,
                ),
              )
            ]
          : [
              GestureDetector(
                behavior: HitTestBehavior.opaque,
                onTap: onTap,
                child: Align(
                  child: Padding(
                    padding: EdgeInsets.only(right: 16),
                    child: TextCommon(right ?? '',
                        color: rightColor ?? Colors.black),
                  ),
                ),
              )
            ],
      leading: canPop
          ? leading ??
              IconButton(
                  icon: Icon(
                    Icons.arrow_back_ios,
                    color: isWhiteBack ? Colors.white : Color(0xFF333333),
                    size: 22,
                  ),
                  onPressed: () => Navigator.pop(context))
          : Container(),
      title: TextCommon(
        title ?? '',
        size: titleSize,
        color: isWhiteBack ? Colors.white : Colors.black,
      ),
      bottom: this.bottomWidget,
    );
  

  @override
  Size get preferredSize => Size.fromHeight(height);

组件使用

Scaffold(
  appBar: AppBarLeftTitle(
     title: '标题',
   ),
   ......
 )

添加右组件实例

AppBarLeftTitle(
	 title: '标题',
	 rightWidget: ButtonCommon(
	    margin: EdgeInsets.symmetric(horizontal: 10.0),
	    text: '返回上一级',
	    fontSize: 12.0,
	    width: 80,
	    height: 30,
	    color: ColorHelper.linkBlue,
	    circular: 5.0,
	    onTap: () 
	    
	  ),
	),
)

如果有疑问可以在留言区留言，我将尽可能解决