flutter iOS风格导航栏封装CupertinoNavigationBar

CupertinoNavigationBar 是flutter提供的iOS导航栏,效果与iOS一致,
AppBar是flutter风格导航,如果不设置高度在iOS上面会显得很高。
我是做ios 对iOS的UI情有独钟,这样在ios设备上面运行才显得比较好看。

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

class CoustomNavigationBar extends StatelessWidget {
  //ios风格导航
  final String title;
  final Widget body;
  final Color appBarBackgroundColor;
//  0,//隐藏底部阴影分割线
  final double elevation;
  final List actions;
  final Widget leading;
  final Widget trailing;
  Color backgroundColor =Color(0xFFFf6f6f6);
  CoustomNavigationBar({
    this.title ='',
    this.appBarBackgroundColor,
    this.elevation =0,
    this.actions,
    this.leading,
    this.backgroundColor,
    this.trailing,
    this.body});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      //ios原声导航
      appBar:_appBar(context),
      backgroundColor:backgroundColor,
      body: body,
    );
  }

 Widget _appBar(BuildContext context){
    if(Platform.isIOS){
      return  CupertinoNavigationBar(
        automaticallyImplyLeading: false,
        automaticallyImplyMiddle:true,
        middle: Text(title),
        //隐藏分割线
//        border: Border(),
        //自定义图片起始位置
        padding: EdgeInsetsDirectional.only(start: 0,end: 10,top: 0,bottom: 0),
        backgroundColor: Colors.white,
        previousPageTitle: "返回",
        trailing: this.trailing,
        leading:leading==null?Container(
          //需要 用Material包裹IconButton 不然到第三个页面会报错
          child:Material(
            color: Colors.transparent,
            child: IconButton(
            icon: Icon(Icons.arrow_back_ios,size: 25,color: Colors.red,),
            padding: EdgeInsets.all(0),
            onPressed: ()=>Navigator.of(context).pop(),
          ),
        )):leading,
        actionsForegroundColor: Colors.red,
      );
    }else{
      //flutter 导航
        return  PreferredSize(
          preferredSize: Size.fromHeight(44),
          child: AppBar(
            title: Text(title),
            backgroundColor: appBarBackgroundColor,
            elevation: elevation,//隐藏底部阴影分割线
            actions: actions,
            leading: leading,
          ),

        );
    }
  }

}

你可能感兴趣的:(flutter iOS风格导航栏封装CupertinoNavigationBar)