Flutter架构搭建《二》自定义Appbar

最新推荐文章于 2025-02-18 17:50:27 发布

慈眉善目张先森

最新推荐文章于 2025-02-18 17:50:27 发布

阅读量245

点赞数 1

CC 4.0 BY-SA版权

分类专栏： flutter 文章标签： flutter自定义appbar 自定义Appbar

本文链接：https://blog.youkuaiyun.com/qq_28535319/article/details/98875787

flutter 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍如何在Flutter中创建自定义Appbar组件，通过实现PreferredSizeWidget接口并使用AnnotatedRegion和SafeArea等Widget，展示如何集成图标按钮及响应事件，提供了一个完整的自定义Appbar实现案例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Flutter架构搭建《二》自定义Appbar

自定义Appbar

/**
 * @Author: Nimodou
 * @Blog: https://blog.youkuaiyun.com/qq_28535319
 * @Email: 344451903@qq.com
 * @Email: Nimodou93@163.com
 * @Date: 2019/7/27
 * @Description:
 */
///
class AppBarCustomer extends StatefulWidget implements PreferredSizeWidget{

  AppBarCustomer({@required this.child,this.value}) : assert(child != null);
  final Widget child;
  final SystemUiOverlayStyle value;
  @override
  Size get preferredSize {
    return new Size.fromHeight(56.0);
  }
  @override
  State createState() {
    return new MAppBarState();
  }
}


class MAppBarState extends State<AppBarCustomer> {
  @override
  Widget build(BuildContext context) {
    return AnnotatedRegion<SystemUiOverlayStyle>(
      value: widget.value??SystemUiOverlayStyle.dark,
      child: new SafeArea(
        top: true,
        child: widget.child,
    ));
  }
}

使用

AppBarCustomer(
        child: Container(
            width: ScrennInstance.width,
            height: 45,
            decoration: BoxDecoration(color: ThemeApp.white),
            child: Stack(
              children: <Widget>[
                Positioned(
                  left: 10,
                  child: IconButton(
                    icon: Icon(Icons.arrow_back_ios),
                    color: Colors.black54,
                    onPressed: () {
                      RouteUtil.maybePop(context);
                    },
                  ),
                ),
                Center(
                  child: Text('设备响应列表', style: TextStyles.appTitle),
                ),
                Positioned(
                    right: 10,
                    child: IconButton(
                        icon: Icon(Icons.add),
                        color: Colors.black54,
                        onPressed: () {
                          RouteUtil.pushEmentAndBackResult(
                              context,
                              DeviceResponsAddPage(
                                  room: widget.room, orgId: widget.orgId),
                              (ResponsDeviceItemBean result) {
                            if (result != null) {
                              widget.sceneResponseList.add(result);
                              setState(() {});
                            }
                          });
                        })),
              ],
            )),
      ),