flutter标题栏Appbar的封装

设置标题栏高度PreferredSize

Flutter的标题栏通常使用AppBar, 但是AppBar并没有提供设置高度的参数, 需要使用PreferredSize包裹appbar, 并设置preferredSize属性

设置appbar中的控件

通过leading和actions属性设置左右的控件
通过title指定标题栏的控件
通过centerTitle指定默认标题栏的位置, 默认Android上是false, 默认偏左

  • backAppbar可以返回一个只有标题和返回键的标题栏
import 'package:bigtoe/style/qss_color.dart';
import 'package:flutter/material.dart';

/**
 * Created with IntelliJ IDEA.
 * Package: utils
 * Author: sirai
 * Create Time: 2019-06-24 16:10
 * QQ: 785716471
 * Email: 785716471@qq.com
 * Description:公共的titlebar
 */

class TitleBar {

  /**
   * 仅含 左侧返回按钮 及中间标题
   * appBar: TitleBar().backAppbar(context, '个人资料'),
   * appBar: TitleBar().backAppbar(context, '个人资料',(){}),
   */
  backAppbar(BuildContext context, String title,{VoidCallback onPressed}) {
    return PreferredSize(
        preferredSize: Size.fromHeight(48),
        child: AppBar(
          title: Text(
            title,
            style: TextStyle(color: QssColors.black, fontSize: 16),
          ),
          centerTitle: true,
          leading: _leading(context,onPressed),
          brightness: Brightness.light,
          backgroundColor: QssColors.white,
          elevation: 0,
          iconTheme: IconThemeData(color: QssColors.black),
        ));
  }
  
  /**
   * 设置左侧按钮
   */
  _leading(BuildContext context, VoidCallback onPressed) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Container(
          width: 44,
          padding: EdgeInsets.all(0),
          child: new IconButton(
            padding: EdgeInsets.only(left: 16, right: 16),
//            icon: Image.asset(
//              'assets/images/ic_black_left_arrow.png',
//              fit: BoxFit.contain,
//              width: 16,
//              height: 16,
//            ),
            icon: Icon(Icons.chevron_left),
            onPressed: () {
              if (onPressed == null) {
                _popThis(context);
              } else {
                onPressed();
              }
            },
          ),
        ),
      ],
    );
  }


  /**
   * 关闭页面
   */
  _popThis(BuildContext context){
    Navigator.of(context).pop();
  }

}

转载 https://blog.csdn.net/u014449046/article/details/92242982

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1、窗体 1、常用属性 (1)Name属性:用来获取或设置窗体的名称,在应用程序中可通过Name属性来引用窗体。 ...
    Moment__格调阅读 4,589评论 0 11
  • 翻译自“Auto Layout Guide”。 2 自动布局细则手册 2.1 堆栈视图 接下来的章节展示了如何使用...
    lakerszhy阅读 1,892评论 3 9
  • Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 11,136评论 1 32
  • ¥开启¥ 【iAPP实现进入界面执行逐一显】 〖2017-08-25 15:22:14〗 《//首先开一个线程,因...
    小菜c阅读 6,510评论 0 17
  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,310评论 1 41