直播app開發，封裝式標題欄

直播app開發，封裝式標題欄實現的相關程式碼

封裝文字元件 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: () {
    }
  ),
),
)

以上就是直播app開發，封裝式標題欄實現的相關程式碼， 更多內容歡迎關注之後的文章