欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

你知道吗,Flutter内置了10多种show

程序员文章站 2022-03-10 16:13:58
注意:无特殊说明,Flutter版本及Dart版本如下: Flutter版本: 1.12.13+hotfix.5 Dart版本: 2.7.0 showDialog showDialog 用于弹出Material风格对话框,基本用法如下: 效果如下: 通常返回 组件,比如 和`AlertDialog` ......

你知道吗,Flutter内置了10多种show

注意:无特殊说明,flutter版本及dart版本如下:

  • flutter版本: 1.12.13+hotfix.5
  • dart版本: 2.7.0

showdialog

showdialog 用于弹出material风格对话框,基本用法如下:

showdialog(
    context: context,
    builder: (context) {
      return alertdialog(
        ...
      );
    }
);

效果如下:

你知道吗,Flutter内置了10多种show

builder通常返回dialog组件,比如simpledialogalertdialog

userootnavigator参数用于确定是否将对话框推送到给定“context”最远或最接近的navigator。默认情况下,userootnavigator为“true”,被推送到根navigator。如果应用程序有多个navigator,关闭对话框需要使用

navigator.of(context, rootnavigator: true).pop(result)

而不是

navigator.pop(context, result)

barrierdismissible参数确认点击提示框外部区域时是否弹出提示框,默认true。

showcupertinodialog

showcupertinodialog 用于弹出ios风格对话框,基本用法如下:

showcupertinodialog(
    context: context,
    builder: (context) {
      return cupertinoalertdialog(
       ...
      );
    });

效果如下:

你知道吗,Flutter内置了10多种show

builder通常返回cupertinodialog或者cupertinoalertdialog

showgeneraldialog

如果上面2种提示框不满足你的需求,还可以使用showgeneraldialog自定义提示框,事实上,showdialog和showcupertinodialog也是通过showgeneraldialog实现的,基本用法如下:

showgeneraldialog(
    context: context,
    barrierdismissible:true,
    barrierlabel: '',
    transitionduration: duration(milliseconds: 200),
    pagebuilder: (buildcontext context, animation<double> animation,
        animation<double> secondaryanimation) {
      return center(
        child: container(
          height: 300,
          width: 250,
          color: colors.lightgreenaccent,
        ),
      );
    });

效果如下:

你知道吗,Flutter内置了10多种show

加上背景颜色:

showgeneraldialog(
    context: context,
    barriercolor: colors.black.withopacity(.5),
    ...
  )

效果如下:

你知道吗,Flutter内置了10多种show

barrierdismissible:是否可以点击背景关闭。

barriercolor:背景颜色

transitionduration:动画时长,

transitionbuilder是构建进出动画,默认动画是渐隐渐显,构建缩放动画代码如下:

showgeneraldialog(
    transitionbuilder: (buildcontext context, animation<double> animation,
        animation<double> secondaryanimation, widget child) {
      return scaletransition(scale: animation, child: child);
    },
    ...
  )

效果如下:

你知道吗,Flutter内置了10多种show

showaboutdialog

aboutdialog用于描述当前app信息,底部提供2个按钮:查看许可按钮和关闭按钮。aboutdialog需要和showaboutdialog配合使用,用法如下:

showaboutdialog(
  context: context,
  applicationicon: image.asset(
    'images/bird.png',
    height: 100,
    width: 100,
  ),
  applicationname: '应用程序',
  applicationversion: '1.0.0',
  applicationlegalese: 'copyright 老孟,一枚有态度的程序员',
  children: <widget>[
    container(
      height: 30,
      color: colors.red,
    ),
    container(
      height: 30,
      color: colors.blue,
    ),
    container(
      height: 30,
      color: colors.green,
    )
  ],
);

效果如下:

你知道吗,Flutter内置了10多种show

属性说明如下:

  • applicationicon:应用程序的图标。
  • applicationname:应用程序名称。
  • applicationversion:应用程序版本。
  • applicationlegalese:著作权(copyright)的提示。
  • children:位置如上图的红蓝绿色的位置。

所有的属性都需要手动设置,不是自动获取的。

下面的2个按钮根据应用程序支持的语言显示相应的语言,比如显示中文方法如下:

  1. pubspec.yaml中配置支持国际化:
dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter
  1. 在materialapp中配置当前区域:
materialapp(
      title: 'flutter demo',
      localizationsdelegates: [
        globalmateriallocalizations.delegate,
        globalwidgetslocalizations.delegate,
      ],
      supportedlocales: [
        const locale('zh', 'ch'),
        const locale('en', 'us'),
      ],
      locale: locale('zh'),
      ...
  )

此时效果:

你知道吗,Flutter内置了10多种show

此时点击查看许将会调用showlicensepage,相关效果可以查看showlicensepage

showlicensepage

此控件基本不会用到,浏览一下即可。

licensepage用于描述当前app许可信息,licensepage需要和showlicensepage配合使用,用法如下:

showlicensepage(
  context: context,
  applicationicon: image.asset(
    'images/bird.png',
    height: 100,
    width: 100,
  ),
  applicationname: '应用程序',
  applicationversion: '1.0.0',
  applicationlegalese: 'copyright 老孟,一枚有态度的程序员',
);

效果如下:

你知道吗,Flutter内置了10多种show

下面的英文我们是无法更改的。

showbottomsheet

在最近的scaffold父组件上展示一个material风格的bottom sheet,位置同scaffold组件的bottomsheet,如果scaffold设置了bottomsheet,调用showbottomsheet抛出异常。

基本用法如下:

showbottomsheet(
    context: context,
    builder: (context) {
      return container(height: 200, color: colors.lightblue);
    });

效果如下:

你知道吗,Flutter内置了10多种show

设置其背景颜色、阴影值、形状:

showbottomsheet(
    context: context,
    backgroundcolor: colors.lightgreenaccent,
    elevation:20,
    shape: circleborder(),
    builder: (context) {
      return container(height: 200);
    });

效果如下:

你知道吗,Flutter内置了10多种show

通常情况下,我们希望直接从底部弹出,showmodalbottomsheet提供了直接从底部弹出的功能。

showmodalbottomsheet

从底部弹出,通常和bottomsheet配合使用,用法如下:

showmodalbottomsheet(
        context: context,
        builder: (buildcontext context) {
          return bottomsheet(...);
        });

效果如下:

你知道吗,Flutter内置了10多种show

设置背景、阴影、形状:

showmodalbottomsheet(
    context: context,
    backgroundcolor: colors.lightblue,
    elevation: 10,
    shape: roundedrectangleborder(borderradius: borderradius.circular(30)),
    ...
  )

效果如下:

你知道吗,Flutter内置了10多种show

isdismissible:是否可以点击背景关闭。

isscrollcontrolled参数指定是否使用可拖动的可滚动的组件,如果子组件是listview或者gridview,此参数应该设置为true,设置为true后,最大高度可以占满全屏。用法如下:

showmodalbottomsheet(
    context: context,
    isscrollcontrolled: true,
    builder: (buildcontext context) {
      return listview.builder(
        itembuilder: (context, index) {
          return listtile(
            title: text('老孟$index'),
          );
        },
        itemextent: 50,
        itemcount: 50,
      );
    });

showcupertinomodalpopup

showcupertinomodalpopup 展示ios的风格弹出框,通常情况下和cupertinoactionsheet配合使用,用法如下:

showcupertinomodalpopup(
    context: context,
    builder: (buildcontext context) {
      return cupertinoactionsheet(
        title: text('提示'),
        message: text('是否要删除当前项?'),
        actions: <widget>[
          cupertinoactionsheetaction(
            child: text('删除'),
            onpressed: () {},
            isdefaultaction: true,
          ),
          cupertinoactionsheetaction(
            child: text('暂时不删'),
            onpressed: () {},
            isdestructiveaction: true,
          ),
        ],
      );
    }
);

效果如下:

你知道吗,Flutter内置了10多种show

filter参数可以对弹出框以外的区域做模糊或者矩阵操作,用法如下:

showcupertinomodalpopup(
    context: context,
    filter: imagefilter.blur(sigmax: 5.0, sigmay: 5.0),
    ...
  )

效果如下:

你知道吗,Flutter内置了10多种show

弹出框以外的区域有毛玻璃的效果。

showmenu

showmenu弹出一个menu菜单,用法如下:

showmenu(
    context: context,
    position: relativerect.fill,
    items: <popupmenuentry>[
      popupmenuitem(child: text('语文')),
      popupmenudivider(),
      checkedpopupmenuitem(
        child: text('数学'),
        checked: true,
      ),
      popupmenudivider(),
      popupmenuitem(child: text('英语')),
    ]);

position参数表示弹出的位置,效果如下:

你知道吗,Flutter内置了10多种show

弹出的位置在屏幕的左上角,我们希望弹出的位置在点击按钮的位置,因此需要计算按钮的位置,计算如下:

final renderbox button = context.findrenderobject();
final renderbox overlay = overlay.of(context).context.findrenderobject();
final relativerect position = relativerect.fromrect(
  rect.frompoints(
    button.localtoglobal(offset(0, 0), ancestor: overlay),
    button.localtoglobal(button.size.bottomright(offset.zero),
        ancestor: overlay),
  ),
  offset.zero & overlay.size,
);

你需要将按钮单独封装为statefulwidget组件,否则context代表的就不是按钮组件。

showsearch

showsearch 是直接跳转到搜索页面,用法如下:

showsearch(context: context, delegate: customsearchdelegate());

class customsearchdelegate extends searchdelegate<string>{
  @override
  list<widget> buildactions(buildcontext context) {
    return null;
  }

  @override
  widget buildleading(buildcontext context) {
    return null;
  }

  @override
  widget buildresults(buildcontext context) {
    return null;
  }

  @override
  widget buildsuggestions(buildcontext context) {
    return null;
  }

}

使用showsearch,首先需要重写一个searchdelegate,实现其中的4个方法。

buildleading表示构建搜索框前面的控件,一般是一个返回按钮,点击退出,代码如下:

@override
widget buildleading(buildcontext context) {
  return iconbutton(
    icon: icon(icons.arrow_back,color: colors.blue,),
    onpressed: (){
      close(context, '');
    },
  );
}

效果如下:

你知道吗,Flutter内置了10多种show

buildsuggestions是用户正在输入时显示的控件,输入框放生变化时回调此方法,通常返回一个listview,点击其中一项时,将当前项的内容填充到输入框,用法如下:

@override
widget buildsuggestions(buildcontext context) {
  return listview.separated(
    itembuilder: (context, index) {
      return listtile(
        title: text('老孟 $index'),
        ontap: () {
          query = '老孟 $index';
        },
      );
    },
    separatorbuilder: (context, index) {
      return divider();
    },
    itemcount: random().nextint(5),
  );
}

效果如下:

你知道吗,Flutter内置了10多种show

buildactions输入框后面的控件,一般情况下,输入框不为空,显示一个清空按钮,点击清空输入框:

@override
list<widget> buildactions(buildcontext context) {
  return [
    iconbutton(
      icon: icon(
        icons.clear,
      ),
      onpressed: () {
        query = '';
      },
    )
  ];
}

buildresults是构建搜索结果控件,当用户点击软键盘上的“search”时回调此方法,一般返回listview,用法如下:

@override
widget buildresults(buildcontext context) {
  return listview.separated(
    itembuilder: (context, index) {
      return container(
        height: 60,
        alignment: alignment.center,
        child: text(
          '$index',
          style: textstyle(fontsize: 20),
        ),
      );
    },
    separatorbuilder: (context, index) {
      return divider();
    },
    itemcount: 10,
  );
}

效果如下:

你知道吗,Flutter内置了10多种show

欢迎加入flutter的微信交流群(laomengit),一起学习,一起进步,生活不止眼前的苟且,还有诗和《远方》。

当然我也非常希望您关注我个人的公众号,里面有各种福利等着大家哦。

你知道吗,Flutter内置了10多种show