Android中Flutter自定义APPbar的实现

源码解读
用法
代码
具体的用法
效果图：

AppBar({  Key key,  this.leading,    this.automaticallyImplyLeading = true,  this.title,   this.actions,  this.flexibleSpace,  this.bottom,  this.elevation,  this.shape,  this.backgroundColor,  this.brightness,  this.iconTheme,  this.actionsIconTheme,  this.textTheme,  this.primary = true,  this.centerTitle,  this.titleSpacing = NavigationToolbar.kMiddleSpacing,  this.toolbarOpacity = 1.0,  this.bottomOpacity = 1.0,})

想这些参数，代表什么意思，怎么用，大家如果不会了，直接点击去看源码，都有解释，用法也有例子哈。我们要自定义，其实就是这些属性的重新组装，组装之后就变成了我们产品需要的样式了哈。

我们要做的工作就是照猫画虎。
appBar他是怎么实现的呢？

class AppBar extends StatefulWidget implements PreferredSizeWidget

是不是这样写的，而在“Scaffold”中我们要new AppBar（），但是我们点进去看的时候，在Scaffold中，APPBar他是需要的/// An app bar to display at the top of the scaffold. final PreferredSizeWidget appBar; 这个玩意，那我们在抽离的时候就给他创建个PreferredSizeWidget呗

@overrideWidget build(BuildContext context) {  // TODO: implement build  return new Scaffold(    appBar: new AppBar(),  // 这里就是我们需要new 的    body: new Container(),  );}

而PreferredSizeWidget 你点进去看他是一个抽象类。怎么做呢？
你会发现他下面有个PreferredSize 已经实现了，所以我们在创建的时候就用PreferredSize

我们自己定义，代码如下：

class BaseViewBar extends PreferredSize {  Widget childView;  @override  final Size preferredSize;  BaseViewBar({this.preferredSize, this.childView});  @override  Widget build(BuildContext context) {    Widget current = childView;    if (childView == null) {      current = LimitedBox(        maxWidth: 0.0,        maxHeight: 0.0,        child: ConstrainedBox(constraints: const BoxConstraints.expand()),      );    }    return current;  }}

用法

appBar: new BaseViewBar(    childView: Text("首页"),// 这里暂时用Text代替，下面会讲到    preferredSize: Size.fromHeight(50.0)),

而这里的childView 怎么写呢，看我的，这时候就要用到appbar的属性了。

代码

import 'package:flutter/material.dart';class BaseTitleBar extends StatelessWidget {  String title;  IconData leftIcon = Icons.arrow_back_ios;  String rightText;  final VoidCallback rightClick;  BaseTitleBar(this.title, {this.leftIcon, this.rightText, this.rightClick});  @override  Widget build(BuildContext context) {    return new AppBar(      flexibleSpace: Container(        /// 实现渐变色的效果        decoration: BoxDecoration(          gradient: LinearGradient(            colors: [              Color.fromRGBO(26, 155, 214, 1),              Color.fromRGBO(54, 209, 193, 1)            ],          ),        ),      ),      title: new Text(this.title),      leading: new IconButton(        /// 左边图标，视情况而定，自己穿参数        icon: Icon(this.leftIcon),        color: Colors.white,        onPressed: () {          Navigator.pop(context);        },      ),      brightness: Brightness.dark,      elevation: 2.0,      centerTitle: true,      actions: [        /// 右边的 布局，自己可以添加，是一个widget的一个集合，自已需求添加即可，我这里写了一个Text，和text的点击事件，        new RightView(title: rightText, rightClick: rightClick),      ],    );  }}/// 右边的 布局，以及点击事件class RightView extends StatelessWidget {  String title;  VoidCallback rightClick;  RightView({this.title, this.rightClick});  @override  Widget build(BuildContext context) {    var containView;    if (title != Null) {      containView = new Container(        alignment: Alignment.center,        padding: EdgeInsets.all(10.0),        child: GestureDetector(          child: Text(            this.title,            style: TextStyle(color: Colors.white, fontSize: 18.0),          ),          onTap: this.rightClick,        ),      );    } else {      containView = Text("");    }    return containView;  }}

具体的用法

BaseTitleBar替换上面的text的位置即可

appBar: new BaseViewBar(    childView: new BaseTitleBar(      "首页",      leftIcon: Icons.arrow_back_ios,      rightText: "提交",      rightClick: () {        print("点击了干嘛啊。。。哦");      },    ),    preferredSize: Size.fromHeight(50.0)),

Android中 Flutter实现自定义的APPbar

Android中Flutter自定义APPbar的实现

目录

源码解读

用法

代码

具体的用法

效果图：

更多相关文章

随机推荐