美文网首页Flutter
Flutter 自定义一个AppBar

Flutter 自定义一个AppBar

作者: 代瑶 | 来源:发表于2020-07-07 11:15 被阅读0次

自定义AppBar 先上图, 看效果.


image.png

这个其实很简单, 我们可以利用appbar 的title, 它后面需要实例化一个Widget嘛, 所以这样写

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.white,
        elevation: 1,
        title: HomeAppBar() //注意这行, HomeAppBar 是我们自己写的
      ),
      body: Container(),
    );
  }

下面贴HomeAppBar代码

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

class HomeAppBar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //横向布局
    return Row(
      children: <Widget>[
        //因为它是左右占比结构,所以使用Expanded 的flex
        Expanded(
          flex: 1,
          child: InkWell(
              //利用InkWell组件包裹其他组件,则拥有了点击事件
              onTap: () {
                print('点击了');
              },
              child: Container(
                //所有组件垂直居中
                alignment: Alignment.center,
                height: 40,
                padding: EdgeInsets.fromLTRB(0, 0, 15, 0),
                //带有弧度的边框,有背景色
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(20),
                  color: Colors.black12,
                ),
                child: Stack(
                  alignment: Alignment.center,
                  children: <Widget>[
                    Row(
                      //常用于Row和Column控件
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        Icon(Icons.search, color: Colors.black38),
                        SizedBox(width: 10), //常用于两个组件之间的分隔
                        Text(
                          '高考加油',
                          style: TextStyle(color: Colors.black38),
                        )
                      ],
                    ),
                    Align(
                      alignment: Alignment.centerRight,
                      child: IconButton(
                        icon: Icon(Icons.picture_in_picture),
                        color: Colors.black38,
                        onPressed: () {
                          print('点击右边图标');
                        },
                      ),
                    )
                  ],
                ),
              )),
        ),
        Expanded(
          flex: 0,
          child: IconButton(
            icon: Icon(Icons.notifications),
            color: Colors.black38,
            onPressed: () {},
          ),
        ),
      ],
    );
  }
}

相关文章

  • flutter封装AppBar

    flutter封装AppBar 最近做flutter项目,为了更简洁,封装了AppBar组件,不过不是自定义组件哈...

  • 2020-09-04

    Flutter AppBar 上方空间多余问题 自定义 使用MediaQuery.removePadding 的r...

  • Flutter 自定义AppBar实现滚动渐变

    通过 Flutter 携程网实战项目,实现自定义AppBar实现滚动渐变。 项目地址 效果如下: 代码实现(注意注释):

  • Flutter自定义Appbar

    起初想到这个需求,是因项目中有头部定制化的功能。于是硬着头皮去搜索,最终实现了,我的效果图展示只是一个我做成的样子...

  • Flutter 自定义 AppBar

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

  • Flutter 自定义一个AppBar

    自定义AppBar 先上图, 看效果. 这个其实很简单, 我们可以利用appbar 的title, 它后面需要实...

  • Flutter研究(六)- ListView无法置顶

    自定义一个透明的AppBar,透明AppBar下方放一个全屏的ListView。 但是发现ListView无法充满...

  • Flutter自定义带搜索框的AppBar

    刚起步学习Flutter,还是比较容易上手的。下面介绍一下自定义的带搜索框的AppBar。 项目地址(github...

  • flutter标题栏Appbar的封装

    设置标题栏高度PreferredSize Flutter的标题栏通常使用AppBar, 但是AppBar并没有提供...

  • flutter appbar

    有以下常用属性: leading → Widget - 在标题前面显示的一个控件,在首页通常显示应用的 logo;...

网友评论

    本文标题:Flutter 自定义一个AppBar

    本文链接:https://www.haomeiwen.com/subject/mecaqktx.html