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

你知道吗,Flutter内置了10多种Button控件

程序员文章站 2022-03-26 22:27:53
注意:无特殊说明,Flutter版本及Dart版本如下: Flutter版本: 1.12.13+hotfix.5 Dart版本: 2.7.0 Flutter内置了10多种Button(按钮)类控件供我们使用,了解这些控件有助于提高我们的开发速度。 RaisedButton RaisedButton是 ......

你知道吗,Flutter内置了10多种Button控件

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

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

flutter内置了10多种button(按钮)类控件供我们使用,了解这些控件有助于提高我们的开发速度。

raisedbutton

raisedbutton是一个material风格”凸起“的按钮,基本用法:

raisedbutton(
  child: text('button'),
  onpressed: (){
  },
)

效果:

你知道吗,Flutter内置了10多种Button控件

onpressed为null或不设置时,按钮是禁用状态。

onhighlightchanged为高亮变化回调,按下时处于高亮状态,抬起处于不高亮状态,用法如下:

raisedbutton(
  onhighlightchanged: (high){
  },
  ...
)

按钮可以设置字体及各种状态颜色,总结如下:

属性 说明
textcolor 字体颜色
disabledtextcolor 禁用状态下字体颜色
color 背景颜色
disabledcolor 禁用状态下背景颜色
highlightcolor 高亮颜色,按下时的颜色
splashcolor 水波纹颜色,按下松开会有水波纹效果

以textcolor为例,用法如下:

raisedbutton(
  textcolor: colors.red,
  ...
)

也可以通过texttheme设置字体样式,用法如下:

raisedbutton(
  texttheme: buttontexttheme.primary,
  ...
)

buttontexttheme的值介绍如下:

  • normal:黑色或者白色字体,依赖于themedata.brightness
  • accent:字体颜色依赖于themedata.accentcolor
  • primary :字体颜色依赖于themedata.primarycolor

这3个值在materialapp控件中进行全局设置,设置如下:

materialapp(
  title: 'flutter demo',
  theme: themedata(
    primarycolor: color(0xff42a5f5),
    accentcolor: colors.yellow,
    brightness: brightness.light
  ),
  ...
)

设置按钮阴影、高亮阴影、禁用阴影,用法如下:

raisedbutton(
  elevation: 5.0,
  highlightelevation: 5.0,
  disabledelevation: 5.0,
  ...
)

shape设置按钮的形状,比如设置为圆形,代码如下:

raisedbutton(
  shape: circleborder(),
  ...
)

效果如下:

你知道吗,Flutter内置了10多种Button控件

hover相关的属性是指鼠标悬停时的状态,移动端没有效果,focus相关的属性为获取焦点时的状态。

flatbutton

flatbutton是一个扁平的按钮,用法和raisedbutton一样,代码如下:

flatbutton(
  child: text('button'),
  color: colors.blue,
  onpressed: () {},
)

效果如下:

你知道吗,Flutter内置了10多种Button控件

outlinebutton

outlinebutton 是一个带边框的按钮,用法和raisedbutton一样,代码如下:

outlinebutton(
  child: text('button'),
  onpressed: () {},
)

效果如下:

你知道吗,Flutter内置了10多种Button控件

设置其边框样式,代码如下:

outlinebutton(
  borderside: borderside(color: colors.blue,width: 2),
  disabledbordercolor: colors.black,
  highlightedbordercolor: colors.red,
  child: text('button'),
  onpressed: () {},
)

效果如下:
你知道吗,Flutter内置了10多种Button控件

dropdownbutton为下拉选择按钮,基本用法如下:

var _dropvalue = '语文';

_buildbutton() {
  return dropdownbutton(
    value: _dropvalue,
    items: [
      dropdownmenuitem(child: text('语文'),value: '语文',),
      dropdownmenuitem(child: text('数学'),value: '数学'),
      dropdownmenuitem(child: text('英语'),value: '英语'),
    ],
    onchanged: (value){
      setstate(() {
        _dropvalue = value;
      });
    },
  );
}

items是点击时弹出选项,onchanged选项发生变化时回调。效果如下:

你知道吗,Flutter内置了10多种Button控件

如果你对选中的选项的样式不满意,可以自定义,用法如下:

dropdownbutton(
  selecteditembuilder: (context){
    return [
      text('语文',style: textstyle(color: colors.red),),
      text('数学',style: textstyle(color: colors.red),),
      text('英语',style: textstyle(color: colors.red),)
    ];
  },
  ...
)

selecteditembuilder返回的组件要和items中一一对应,选中样式如下:

你知道吗,Flutter内置了10多种Button控件

当用户未选中时,即value 为null,显示''请选中",用法如下:

dropdownbutton(
  hint: text('请选择'),
  value: null,
  ...
)

效果如下:

你知道吗,Flutter内置了10多种Button控件

默认情况下,下拉选项的图标是倒立的三角,也可以进行自定义,用法如下:

dropdownbutton(
  icon: icon(icons.add),
  iconsize: 24,
  icondisabledcolor: colors.red,
  iconenabledcolor: colors.red,
  ...
)

效果如下:

你知道吗,Flutter内置了10多种Button控件

rawmaterialbutton

rawmaterialbutton是基于semantics, materialinkwell创建的组件,它不使用当前的系统主题和按钮主题,用于自定义按钮或者合并现有的样式,而raisedbutton和flatbutton都是基于rawmaterialbutton配置了系统主题和按钮主题,相关属性可以参考raisedbutton,参数基本一样,基本用法如下:

rawmaterialbutton(
  onpressed: (){},
  fillcolor: colors.blue,
  child: text('button'),
)

效果如下:

你知道吗,Flutter内置了10多种Button控件

popupmenubutton

popupmenubutton是一个菜单选中控件,用法如下:

popupmenubutton<string>(
  itembuilder: (context) {
    return <popupmenuentry<string>>[
      popupmenuitem<string>(
        value: '语文',
        child: text('语文'),
      ),
      popupmenuitem<string>(
        value: '数学',
        child: text('数学'),
      ),
      popupmenuitem<string>(
        value: '英语',
        child: text('英语'),
      ),
      popupmenuitem<string>(
        value: '生物',
        child: text('生物'),
      ),
      popupmenuitem<string>(
        value: '化学',
        child: text('化学'),
      ),
    ];
  },
)

效果如下:

你知道吗,Flutter内置了10多种Button控件

设置其初始值:

popupmenubutton<string>(
  initialvalue: '语文',
  ...
)

设置初始值后,打开菜单后,设置的值将会高亮,效果如下:

你知道吗,Flutter内置了10多种Button控件

获取用户选择了某一项的值,或者用户未选中,代码如下:

popupmenubutton<string>(
  onselected: (value){
    print('$value');
  },
  oncanceled: (){
    print('oncanceled');
  },
  ...
)

tooltip是长按时弹出的提示,用法如下:

popupmenubutton<string>(
  tooltip: 'popupmenubutton',
  ...
)

效果如下:

你知道吗,Flutter内置了10多种Button控件

设置其阴影值、内边距和弹出菜单的背景颜色:

popupmenubutton<string>(
  elevation: 5,
  padding: edgeinsets.all(5),
  color: colors.red,
  ...
)

默认情况下,popupmenubutton显示3个小圆点,我们也可以对齐进行设置,设置文字如下:

popupmenubutton<string>(
  child: text('学科'),
  ...
)

child组件将会被inkwell包裹,点击弹出菜单,效果如下:

你知道吗,Flutter内置了10多种Button控件

也可以设置其他图标:

popupmenubutton<string>(
    icon: icon(icons.add),
    ...
)

效果如下:

你知道吗,Flutter内置了10多种Button控件

设置弹出菜单边框:

popupmenubutton<string>(
  shape: roundedrectangleborder(
    side: borderside(
      color: colors.red
    ),
    borderradius: borderradius.circular(10)
  ),
    ...
)

效果如下:

你知道吗,Flutter内置了10多种Button控件

iconbutton

iconbutton是一个图标按钮,用法如下:

iconbutton(
  icon: icon(icons.person),
  iconsize: 30,
  color: colors.red,
  onpressed: () {},
)

设置提示属性:

iconbutton(
  tooltip: '这是一个图标按钮',
  icon: icon(icons.person),
  iconsize: 30,
  color: colors.red,
  onpressed: () {},
)

当长按时显示提示,效果如下:

你知道吗,Flutter内置了10多种Button控件

backbutton

backbutton是一个material风格的返回按钮,本身是一个iconbutton,点击时默认执行navigator.maybepop即如果路由栈有上一页则返回到上一页。

backbutton()

android和ios平台显示的图标是不一样的,ios效果如下:

你知道吗,Flutter内置了10多种Button控件

android效果如下:

你知道吗,Flutter内置了10多种Button控件

closebutton

closebutton是一个material风格的关闭按钮,本身是一个iconbutton,点击时默认执行navigator.maybepop即如果路由栈有上一页则返回到上一页。

和backbutton适用场景不同,backbutton适用于全屏的页面,而closebutton适用于弹出的dialog。

用法如下:

closebutton()

效果如下:

你知道吗,Flutter内置了10多种Button控件

buttonbar

buttonbar并不是一个单独的按钮控件,而是末端对齐的容器类控件,当在水平方向上没有足够空间时候,按钮将整体垂直排列,而不是换行。基本用法如下:

buttonbar(
  children: <widget>[
    raisedbutton(),
    raisedbutton(),
    raisedbutton(),
    raisedbutton(),
  ],
)

效果如下:

你知道吗,Flutter内置了10多种Button控件

设置主轴的对齐方式及主轴的尺寸:

buttonbar(
  alignment: mainaxisalignment.center,
  mainaxissize: mainaxissize.max,
  ...
)

效果如下:

你知道吗,Flutter内置了10多种Button控件

togglebuttons

togglebuttons组件将多个组件组合在一起,并让用户从中选择,togglebuttons基础用法如下:

list<bool> _selecteds = [false, false, true];
togglebuttons(
      isselected: _selecteds,
      children: <widget>[
        icon(icons.local_cafe),
        icon(icons.fastfood),
        icon(icons.cake),
      ],
      onpressed: (index) {
        setstate(() {
          _selecteds[index] = !_selecteds[index];
        });
      },
    );

isselected 属性是bool类型集合,数量和children的数量一致,onpressed是点击回调,这时就有了不错了切换按钮行,效果如下:

你知道吗,Flutter内置了10多种Button控件

我们还可以自定义外观,比如设置按钮的颜色:

togglebuttons(
      color: colors.green,
      selectedcolor: colors.orange,
        fillcolor: colors.red,
      ...
)

效果如下:

你知道吗,Flutter内置了10多种Button控件

fillcolor是选中按钮的背景颜色。

如果不需要边框,可以将renderborder设置为false:

togglebuttons(
    renderborder: false,
)

效果如下:

你知道吗,Flutter内置了10多种Button控件

当然我们也可以设置边框的圆角半径、宽度、颜色等:

togglebuttons(
      borderradius: borderradius.circular(30),
      bordercolor: colors.orange,
      borderwidth: 3,
      selectedbordercolor: colors.deeporange,
)

效果如下:

你知道吗,Flutter内置了10多种Button控件

甚至可以设置点击水波纹颜色(splashcolor)和按下时的高亮颜色(highlightcolor):

togglebuttons(
      splashcolor: colors.purple,
      highlightcolor: colors.yellow,
      )

效果如下:

你知道吗,Flutter内置了10多种Button控件

如果按钮处于禁用状态,可以设置禁用状态下按钮及边框的颜色:

togglebuttons(
      onpressed: null,
      disabledcolor: colors.grey[300],
      disabledbordercolor: colors.bluegrey,
      )

效果如下:

你知道吗,Flutter内置了10多种Button控件

如果开发的是web程序,我们可以设置鼠标悬停颜色:

togglebuttons(
      hovercolor: colors.cyan,
      )

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

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

你知道吗,Flutter内置了10多种Button控件

上一篇: Java运算符优先级

下一篇: 完事