Flutter 封装AppBar

最新推荐文章于 2024-05-14 20:24:26 发布

Spy97

最新推荐文章于 2024-05-14 20:24:26 发布

阅读量694

点赞数

分类专栏： Flutter 文章标签： flutter

本文链接：https://blog.youkuaiyun.com/nudt_spy/article/details/109690529

版权

Flutter 专栏收录该内容

20 篇文章

订阅专栏

在微信中，有4项：聊天、联系人、发现、我的
其中前3项的appbar相同
在这里插入图片描述

“我的”一项没有appbar，所以要对其进行封装

import 'package:flutter/material.dart';

_popupMenuItem(String title, IconData icon) {
  return PopupMenuItem(
      child: Row(
    children: <Widget>[
      Padding(
        child: Icon(
          icon,
          color: Colors.white,
          size: 22,
        ),
        padding: EdgeInsets.only(right: 5),
      ),
      Padding(
        child: Text(title, style: TextStyle(color: Colors.white, fontSize: 22)),
        padding: EdgeInsets.only(left: 5, bottom: 5),
      ),
    ],
  ));
}

AppBar mybar(BuildContext context, String st) {
  return AppBar(
    title: Text(st),
    actions: <Widget>[
      IconButton(
          icon: Icon(
            Icons.search,
            size: 26,
          ),
          onPressed: () {
            Navigator.pushNamed(context, '/search');
          }),
      IconButton(
          icon: Icon(
            Icons.add_circle_outline,
            size: 26,
          ),
          onPressed: () {
            showMenu(
              context: context,
              position: RelativeRect.fromLTRB(500, 75, 10, 0),
              items: <PopupMenuEntry>[
                _popupMenuItem('发起群聊', Icons.chat_bubble_outline),
                _popupMenuItem('添加朋友', Icons.person_add),
                _popupMenuItem('扫一扫', Icons.crop_free),
                _popupMenuItem('收付款', Icons.offline_pin),
                _popupMenuItem('帮助', Icons.mail),
              ],
            );
          })
    ],
  );
}

单个页面代码为

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

class wc extends StatelessWidget {
  _popupMenuItem(String title, IconData icon) {
    return PopupMenuItem(
        child: Row(
      children: <Widget>[
        Padding(
          child: Icon(
            icon,
            color: Colors.white,
            size: 22,
          ),
          padding: EdgeInsets.only(right: 5),
        ),
        Padding(
          child:
              Text(title, style: TextStyle(color: Colors.white, fontSize: 22)),
          padding: EdgeInsets.only(left: 5, bottom: 5),
        ),
      ],
    ));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: mybar(context, '微信'),
      body: Text('wc'),
    );
  }
}