flutter 自定义 AppBar

Fork Me On Github

实现

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

class SearchAppBar extends StatefulWidget implements PreferredSizeWidget {
  final Widget child;           //从外部指定内容
  final Color backgroundColor;  // 背景颜色
  SearchAppBar({this.child, this.backgroundColor});

  @override
  _SearchAppBarState createState() => _SearchAppBarState();

  @override
  Size get preferredSize => new Size.fromHeight(kToolbarHeight);
}

class _SearchAppBarState extends State<SearchAppBar> {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: kToolbarHeight + MediaQuery.of(context).padding.top,
      width: MediaQuery.of(context).size.width,
      color: widget.backgroundColor,
      child: SafeArea(
        top: true,
        bottom: false,
        child: widget.child,
      ),
    );
  }
}
123456789101112131415161718192021222324252627282930

使用

dart
                              
SearchAppBar appBar() {
    return SearchAppBar(
      backgroundColor: Color(0xFF05A6B1),
      child: Row(
        children: <Widget>[
          CachedNetworkImage(
            imageUrl: site.logo,
            width: 100,
          ),
          Expanded(
            child: Container(
              child: Row(
                children: <Widget>[
                  Icon(Icons.search),
                  Text('搜索商品, 共${site.goods}款好物')
                ],
              ),
              decoration: BoxDecoration(
                  color: Color(0xFFededed),
                  borderRadius: BorderRadius.all(const Radius.circular(2))),
            ),
          ),
          Container(
            child: IconButton(icon: Icon(Icons.message), onPressed: () {}),
            width: 54,
          )
        ],
      ),
    );
  }
123456789101112131415161718192021222324252627282930

MediaQuery

MediaQuery.of(context) 获取当前设备的信息

属性 说明
size 逻辑像素,并不是物理像素,类似于Android中的dp,逻辑像素会在不同大小的手机上显示的大小基本一样,物理像素 = size*devicePixelRatio
devicePixelRatio 单位逻辑像素的物理像素数量,即设备像素比。
textScaleFactor 单位逻辑像素字体像素数,如果设置为1.5则比指定的字体大50%。
platformBrightness 当前设备的亮度模式,比如在Android Pie手机上进入省电模式,所有的App将会使用深色(dark)模式绘制。
viewInsets 被系统遮挡的部分,通常指键盘,弹出键盘,viewInsets.bottom表示键盘的高度。
padding 被系统遮挡的部分,通常指“刘海屏”或者系统状态栏。
viewPadding 被系统遮挡的部分,通常指“刘海屏”或者系统状态栏,此值独立于paddingviewInsets,它们的值从MediaQuery控件边界的边缘开始测量。在移动设备上,通常是全屏。
systemGestureInsets 显示屏边缘上系统“消耗”的区域输入事件,并阻止将这些事件传递给应用。比如在Android Q手势滑动用于页面导航(ios也一样),比如左滑退出当前页面。
physicalDepth 设备的最大深度,类似于三维空间的Z轴。
alwaysUse24HourFormat 是否是24小时制。
accessibleNavigation 用户是否使用诸如TalkBackVoiceOver之类的辅助功能与应用程序进行交互,用于帮助视力有障碍的人进行使用。
invertColors 是否支持颜色反转。
highContrast 用户是否要求前景与背景之间的对比度高, iOS上,方法是通过“设置”->“辅助功能”->“增加对比度”。 此标志仅在运行iOS 13的iOS设备上更新或以上。
disableAnimations 平台是否要求尽可能禁用或减少动画。
boldText 平台是否要求使用粗体。
orientation 是横屏还是竖屏。

参考

  1. Flutter 强大的MediaQuery控件
点击查看全文
0 312 0