浅识Flutter 基本组件Scaffold的 floatingActionButton属性

浅识Flutter 基本组件Scaffold的 floatingActionButton属性


foatingActionButtorI属性用于定义应用程序页面上悬停在内容上面的一个圆形图标按钮,用以展示对应程序中的主要动作。
该属性值为FloatingActionButton类型组件, FloatingActionButton组件包含下表所示的常用属性用于设定圆形图标的样式.

属性名 类型 功能说明
child Widget 设置按钮上显示的组件.一般为icon
tooltip String 设置长按按钮时的提示文字
foregroundColor Color 设置按钮前景色
backgroundColor Color 设置按钮背景色
elevation double 设置按钮未点击时阴影值,默认6.0
highlightElevation double 设置按钮点击时阴影值
onPressed void 设置按针点击回调事件
shape ShapeBoder 设置按钮的形状,默认为CircleBorder
mini bool 设置按钮的大小,默认为false(大按钮)

实例代码

floatingActionButton: FloatingActionButton(
        child: Icon(Icons.volume_mute_sharp),
        tooltip: "听小夏子说的",//长按图标显示的内容
        onPressed: () {
          print('小夏子可是有些喇叭在身上的');
        }, //按下按钮时的事件
        foregroundColor: Colors.red, //按钮前景色
        backgroundColor: Colors.white, //按钮背景色
        elevation: 10, //按钮阴影值
        highlightElevation: 30, //按下按钮时的阴影值
        mini: true, //默认为大图标,换成小图标
      ),
      /*更改悬浮图标的位置*/
      floatingActionButtonLocation:
          FloatingActionButtonLocation.centerFloat, //默认在右下角,更改悬浮图标的位置下方居中
      persistentFooterButtons: <Widget>[
        new FlatButton(
            onPressed: () {
              print("奴才在");
            },
            child: Text('小夏子')),
        new FlatButton(
            onPressed: () {
              print("奴才在");
            },
            child: Text('苏培盛'))
      ],

浅识Flutter 基本组件Scaffold的 floatingActionButton属性_第1张图片

tooltip: "听小夏子说的",//长按图标显示的内容

浅识Flutter 基本组件Scaffold的 floatingActionButton属性_第2张图片

child: Icon(Icons.volume_mute_sharp),
        tooltip: "听小夏子说的",//长按图标显示的内容
        onPressed: () {
          print('小夏子可是有些喇叭在身上的');
        }, //按下按钮时的事件

浅识Flutter 基本组件Scaffold的 floatingActionButton属性_第3张图片

persistentFooterButtons: <Widget>[
        new FlatButton(
            onPressed: () {
              print("奴才在");
            },
            child: Text('小夏子')),
        new FlatButton(
            onPressed: () {
              print("奴才在");
            },
            child: Text('苏培盛'))
      ],

浅识Flutter 基本组件Scaffold的 floatingActionButton属性_第4张图片

你可能感兴趣的:(浅识Flutter笔记,flutter,android,ios,android,studio)