• 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:"標題",),
  • 相关阅读:
    华为机试再回忆--第一题
    TCP快速重传和快速恢复
    MongoDB安装,打开及增,删,改,查
    C++默认构造函数的一点说明
    动态链接库编程范例
    使用skin++进行MFC界面美化范例
    分享下我的博客园CSS
    windows多线程同步总结
    TestDirector 8.0 配置说明
    windows2003安装TestDirector8.0 安装时输入用户名密码 提示错误
  • 原文地址:https://www.cnblogs.com/inthecloud/p/12553381.html
Copyright © 2020-2023  润新知