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