zoukankan      html  css  js  c++  java
  • Flutter自定義AppBar組件

    import 'package:date_format/date_format.dart';
    import 'package:flutter/material.dart';
    
    class MyAppBar extends StatefulWidget implements PreferredSizeWidget {
      final String title;
      final bool isLeftWidget;
      final bool isRightWidget;
      final Color topcColor;
      final Color bottomColor;
      final num appBarHeight;
    
      const MyAppBar(
          {Key key,
          this.title,
          this.isLeftWidget,
          this.isRightWidget,
          this.topcColor,
          this.bottomColor,
          this.appBarHeight})
          : super(key: key);
    
      @override
      Size get preferredSize {
        return new Size.fromHeight(56.0);
      }
    
      @override
      State createState() {
        return new MyAppBarState();
      }
    }
    
    class MyAppBarState extends State<MyAppBar> {
      Color topColor;
      Color bottomColor;
      String title = '';
      bool isLeftWidget;
    
      @override
      void initState() {
        // TODO: implement initState
        setState(() {
          topColor =
          widget.topcColor == null ? Color(0xff2d7fc7) : widget.topcColor;
          bottomColor =
          widget.bottomColor == null ? Color(0xff2d7fc7) : widget.bottomColor;
          title = widget.title == null || widget.title == '' ? '標題' : widget.title;
          isLeftWidget = widget.isLeftWidget == null ? false : widget.isLeftWidget;
        });
        super.initState();
      }
      @override
      Widget build(BuildContext context) {
        return PreferredSize(
          child: Stack(
            children: <Widget>[
              Container(
                padding: EdgeInsets.only(left: 10, top: 10),
                 double.infinity,
                height: 96,
                decoration: BoxDecoration(
                    color: bottomColor,
    //                gradient: LinearGradient(
    //                    colors: [Color(0xffc7d6eb), Color(0xffc7d6eb)]),
                    borderRadius: BorderRadius.only(
                        bottomLeft: Radius.circular(25),
                        bottomRight: Radius.circular(25))),
              ),
              Container(
                padding: EdgeInsets.only(left: 10),
                 double.infinity,
                height: 90,
                decoration: BoxDecoration(
                    color: topColor,
    //                gradient: LinearGradient(//漸變樣式
    //                    colors: [Color(0xff2d7fc7), Color(0xff2d7fc7)]),
                    borderRadius: BorderRadius.only(
                        bottomLeft: Radius.circular(25),
                        bottomRight: Radius.circular(25))),
                child: SafeArea(
                    child: Stack(
                  children: <Widget>[
                    isLeftWidget==true?
                    IconButton(
                      color: Color(0xffffffff),
                      icon: Icon(Icons.arrow_back),
                      onPressed: () {
                        Navigator.pop(context);
                      },
                      iconSize: 30,
                    ):Container(),
                    Center(
                      child: Text(
                        title,
                        style: TextStyle(
                            color: Color(0xffffffff),
                            fontSize: 20,
                            fontWeight: FontWeight.w500),
                        textAlign: TextAlign.center,
                      ),
                    )
                  ],
                )),
              ),
            ],
          ),
          preferredSize: Size(double.infinity, 90),
        );
      }
    }

    使用 

    appBar:MyAppBar(
            title:"標題",),
  • 相关阅读:
    js 时间戳格式化
    有关Safari 浏览器的文章
    前端图片旋转动画
    vue中textarea标签自适应高度
    pip 报错 Fatal error in launcher: Unable to create process using
    HTML列表多点击事件
    js获取浏览器版本信息
    SVG圆形进度条
    基于蚂蚁金服"AntDesignVue-Menu导航菜单"实现根据初始路由自动选中对应菜单解决刷新后菜单选择状态丢失问题(支持根路径菜单)
    java根据权重进行排序
  • 原文地址:https://www.cnblogs.com/inthecloud/p/12553381.html
Copyright © 2011-2022 走看看