Flutter 自定义导航

Flutter 自定义导航,第1张

在开发过程中我们100%会使用到导航,当然Flutter也为我们提供了导航控件,但是自带的往往没有没有那么灵活,所以这个时候就需要我们自定义一个导航,下面就给大家讲解如果绘制一个简单的自定义导航。

 

我们还是通过代码的方式来讲解

我这里给自定义导航类命名为TitleNavBar.dart


import 'package:flutter/material.dart';

class TitleNavBar extends StatefulWidget {
  String leftString; // 左边 返回按钮 标题
  String titleString; // 标题
  String rightString; // 右侧 标题文字
  IconData icon; // 右侧 按钮
  Color beginColor; // 导航开始渐变色
  Color endColor; // 导航结束渐变色
  Function callBack;

  // 设置默认值
  TitleNavBar(
      {this.leftString = "返回",
      this.titleString = "",
      this.rightString = "",
      this.icon,
      this.beginColor = const Color(0xFFF68C1C),
      this.endColor = const Color(0xFFFA3E30),
      this.callBack,
      Key key})
      : super(key: key);

  @override
  _TitleNavBarState createState() => _TitleNavBarState();
}

class _TitleNavBarState extends State {
  double navigationHeight = 40; //导航内容高度

  @override
  Widget build(BuildContext context) {
    return Container(
      width: MediaQuery.of(context).size.width, // 设置导航宽度
      height: MediaQuery.of(context).padding.top + navigationHeight, // 导航距离顶部距离
      decoration: BoxDecoration(
        // 设置导航 颜色,可以设置渐变色,传入同样颜色 将会取消渐变色
        gradient: LinearGradient(
          begin: Alignment.centerLeft,
          end: Alignment.centerRight,
          colors: [
            widget.beginColor,
            widget.endColor,
          ],
        ),
      ),
      // 当行具体内容
      child: Container(
        margin: new EdgeInsets.only(top: MediaQuery.of(context).padding.top),
        child: Flex(
          direction: Axis.horizontal,
          children: [
            GestureDetector(
              onTap: () {
                // 左侧点击按钮
                widget.callBack(false);
              },
              child: Container(
                width: 70,
                color: Color(0x00000000),
                height: navigationHeight,
                child: Flex(
                  direction: Axis.horizontal,
                  children: [
                    // 左侧返回按钮图标
                    Container(
                      child: Icon(Icons.arrow_back_ios, color: Colors.white),
                      margin: new EdgeInsets.only(left: 15),
                    ),
                    // 左侧按钮文字
                    Expanded(
                      child: Container(
                        child: Text(widget.leftString,
                            style:
                                TextStyle(fontSize: 15, color: Colors.white)),
                      ),
                    )
                  ],
                ),
              ),
            ),
            // 标题
            Expanded(
              child: Container(
                color: Color(0x00000000),
                height: navigationHeight,
                alignment: Alignment.center,
                child: Text(
                  widget.titleString,
                  style: TextStyle(fontSize: 17, color: Colors.white),
                ),
              ),
            ),
            // 右侧 按钮,右侧按钮设置图标或者文字,也可以取消
            Container(
              width: 70,
              color: Color(0x00000000),
              height: navigationHeight,
              child: Container(
                alignment: Alignment.centerRight,
                padding: new EdgeInsets.only(right: 15),
                child: widget.rightString.length == 0 && widget.icon == null
                    ? Container()
                    : widget.rightString.length == 0
                        ? GestureDetector(
                            onTap: () {
                              widget.callBack(true);
                            },
                            child: Container(
                              child: Icon(Icons.arrow_back_ios,
                                  color: Colors.white),
                            ),
                          )
                        : GestureDetector(
                            onTap: () {
                              widget.callBack(true);
                            },
                            child: Container(
                              child: Text(
                                "保存",
                                style: TextStyle(
                                    fontSize: 15, color: Colors.white),
                              ),
                            ),
                          ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

下面是使用方法


TitleNavBar(rightString: "保存", titleString: "标题",callBack: (status) {
    print(status);
}),

到此就完成了自定义导航的使用,status 如果为 false 代表返回,true 为右侧 按钮

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/994167.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-21
下一篇 2022-05-21

发表评论

登录后才能评论

评论列表(0条)

保存