精华内容
参与话题
问答
  • 图标(Icon)和图标按钮(IconButton

    千次阅读 2019-07-01 18:10:47
    图标组件(Icon)为展示图标的组件,该组件不可交互,要实现交互的图标,可以考虑使用IconButton组件。图标组件相关的组件有一下几个: IconButton:可交互的Icon。 Icons:框架自带Icon集合。 IconTheme:Icon...

    图标组件(Icon)为展示图标的组件,该组件不可交互,要实现交互的图标,可以考虑使用IconButton组件。图标组件相关的组件有一下几个:

    IconButton:可交互的Icon。

    Icons:框架自带Icon集合。

    IconTheme:Icon主题。

    ImageIcon:通过AssetImages或者其他图片显示Icon。

     

    图标组件常用属性如下:

    属性名

    类型

    默认值

    说明

    color

    Color

    null

    图标的颜色,例如Colors.green[500]

    icon

    IconData

    null

    展示的具体图标,可以使用Icons图标列表中的任意一个图标即可,如Icons.phone表示一个电话的图标

    style

    TextStyle

    null

    文本样式,可定义文本的字体大小、颜色、粗细等

    size

    Double

    24

    图标的大小,注意需要带上小数位

    textDirection

    TextDirection

    TextDirection

    Icon组件里也可以添加文本内容。有些文本书写的方向是从左到右,有些则是从右到左。从左到右使用TextDirection.ltr,从右到左使用TextDirection.rtl

     

     

    图标按钮组件(IconButton)是基于Material Design风格的组件,它可以响应按下事件,并且按下时会带一个水波纹的效果。如果它的onPressed回调函数为null,那么这个按钮处于禁用状态,并且不可以按下。常用属性如下:

    属性名

    类型

    默认值

    说明

    alignment

    AlignmentGeometry

    Alignment.center

    定义IconButton的Icon对齐方式,默认为居中。Alignment是可以设置x,y的偏移量的

    icon

    Widget

    null

    展示的具体图标,可以使用Icons图标列表中的任意一个图标即可,如Icons.phone表示一个电话的图标

    color

    Color

    null

    图标组件的颜色

    disabledColor

    Color

    ThemeData.disabledColor

    图标组件禁用的颜色,默认为主题里的禁用颜色,也可以设置为其他颜色值

    iconSize

    double

    24.0 

    图标的大小,注意需要带上小数位

    onPressed

    VoidCallback

    null

    当按钮按下时会触发此回调事件

    tooltip

    String

    ""

    当按钮按下时的组件提示语句

     

    展开全文
  • 文章目录Flutter中的按钮RaisedButtonFlatButtonOutlineButtonIconButton Flutter中的按钮 Flutter中给我们预先定义好了一些按钮控件给我们用,常用的按钮如下 **RaisedButton :**凸起的按钮,其实就是Android中的...

    Flutter中的按钮

    Flutter中给我们预先定义好了一些按钮控件给我们用,常用的按钮如下

    • **RaisedButton :**凸起的按钮,其实就是Android中的Material Design风格的Button ,继承自MaterialButton
    • **FlatButton :**扁平化的按钮,继承自MaterialButton
    • **OutlineButton :**带边框的按钮,继承自MaterialButton
    • **IconButton :**图标按钮,继承自StatelessWidget

    我们先来看看MaterialButton中的属性,可以看到能设置的属性还是很多的。

      const MaterialButton({
        Key key,
        @required this.onPressed,
        this.onHighlightChanged,
        this.textTheme,
        this.textColor,
        this.disabledTextColor,
        this.color,
        this.disabledColor,
        this.highlightColor,
        this.splashColor,
        this.colorBrightness,
        this.elevation,
        this.highlightElevation,
        this.disabledElevation,
        this.padding,
        this.shape,
        this.clipBehavior = Clip.none,
        this.materialTapTargetSize,
        this.animationDuration,
        this.minWidth,
        this.height,
        this.child,
      }) : super(key: key);
    
    

    下面我们来看看常用属性

    项目 Value Value
    onPressed VoidCallback ,一般接收一个方法 必填参数,按下按钮时触发的回调,接收一个方法,传null表示按钮禁用,会显示禁用相关样式
    child Widget 文本控件
    textColor Color 文本颜色
    color Color 按钮的颜色
    disabledColor Color 按钮禁用时的颜色
    disabledTextColor Color 按钮禁用时的文本颜色
    splashColor Color 点击按钮时水波纹的颜色
    highlightColor Color 点击(长按)按钮后按钮的颜色
    elevation double 阴影的范围,值越大阴影范围越大
    padding EdgeInsetsGeometry (抽象类) 内边距
    shape ShapeBorder(抽象类) 设置按钮的形状
    minWidth double 最小宽度
    height double 高度

    而在Android中如果我们要修改按钮样式的话,需要通过selector和Shape等方式进行修改,相比较Flutter来说是要麻烦不少的

    RaisedButton

    RaisedButton的构造方法如下,由于继承自MaterialButton,所以MaterialButton中的大多数属性这边都能用,且效果一致,这里就不在赘述了

      const RaisedButton({
        Key key,
        @required VoidCallback onPressed,
        ValueChanged<bool> onHighlightChanged,
        ButtonTextTheme textTheme,
        Color textColor,
        Color disabledTextColor,
        Color color,
        Color disabledColor,
        Color highlightColor,
        Color splashColor,
        Brightness colorBrightness,
        double elevation,
        double highlightElevation,
        double disabledElevation,
        EdgeInsetsGeometry padding,
        ShapeBorder shape,
        Clip clipBehavior = Clip.none,
        MaterialTapTargetSize materialTapTargetSize,
        Duration animationDuration,
        Widget child,
      })
    
    

    下面我们来看一下属性
    onPressed
    接收一个方法,点击按钮时回调该方法。如果传null,则表示按钮禁用

     return RaisedButton(
          onPressed: null,
        );
    
    

    如下图所示
    在这里插入图片描述
    下面我们定义一个方法传给onPressed

    _log() {
        print("点击了按钮");
      }
    
      @override
      Widget build(BuildContext context) {
        return RaisedButton(
          onPressed: _log,
        );
      }
    
    

    在这里插入图片描述
    点击按钮后会调用log方法。
    在这里插入图片描述

    child
    按钮文本控件,一般都是传一个Text Widget

     return RaisedButton(
          onPressed: _log,
          child: Text("浮动按钮"),
        );
    
    

    color
    按钮的颜色

    return RaisedButton(
          onPressed: _log,
          child: Text("浮动按钮"),
          color: Colors.red,
        );
    
    

    在这里插入图片描述
    textColor

     return RaisedButton(
          onPressed: _log,
          child: Text("浮动按钮"),
          color: Colors.red,
          textColor: Colors.white,
        );
    
    

    按钮的文本颜色
    在这里插入图片描述
    splashColor
    点击按钮时水波纹的颜色

       return RaisedButton(
          onPressed: _log,
          child: Text("浮动按钮"),
          color: Colors.red,
          textColor: Colors.white,
          splashColor: Colors.black,
        
        );
    
    

    在这里插入图片描述
    highlightColor
    高亮颜色,点击(长按)按钮后的颜色

        return RaisedButton(
          onPressed: _log,
          child: Text("浮动按钮"),
          color: Colors.red,
          textColor: Colors.white,
          splashColor: Colors.black,
          highlightColor: Colors.green,
        );
    
    

    在这里插入图片描述

    elevation
    阴影范围,一般不会设置太大

        return RaisedButton(
          onPressed: _log,
          child: Text("浮动按钮"),
          color: Colors.red,
          textColor: Colors.white,
          splashColor: Colors.black,
          highlightColor: Colors.green,
          elevation: 30,
        );
    
    

    在这里插入图片描述

    padding
    内边距,其接收值的类型是EdgeInsetsGeometry类型的,EdgeInsetsGeometry是一个抽象类,我们来看看其实现类
    在这里插入图片描述
    我们一般都用EdgeInsets类中的方法来设置padding
    常用方法如下

    //单独设置左上右下的间距,四个参数都要填写
    const EdgeInsets.fromLTRB(this.left, this.top, this.right, this.bottom);
    
    //单独设置左上右下的间距,四个均为可选参数
      const EdgeInsets.only({
        this.left = 0.0,
        this.top = 0.0,
        this.right = 0.0,
        this.bottom = 0.0
      });
      
      //一次性设置上下左右的间距
      const EdgeInsets.all(double value)
          : left = value, top = value, right = value, bottom = value;
      
    
    

    示例:

    EdgeInsets.all()

          padding: EdgeInsets.all(20)
    
    

    在这里插入图片描述
    EdgeInsets.fromLTRB()

    padding: EdgeInsets.fromLTRB(0,30,20,40)
    

    在这里插入图片描述

    EdgeInsets.only()

     padding: EdgeInsets.only(top: 30)
    
    

    在这里插入图片描述
    shape
    shape用来设置按钮的形状,其接收值是ShapeBorder类型,ShapeBorder是一个抽象类,我们来看看有哪些实现类
    在这里插入图片描述
    可以看到,实现类还是很多的,我们主要来看看常用的即可。

    • BeveledRectangleBorder 带斜角的长方形边框
    • CircleBorder 圆形边框
    • RoundedRectangleBorder 圆角矩形
    • StadiumBorder 两端是半圆的边框

    我们来简单用一用,在用之前我们先来看一下
    常用的两个属性

    • side 用来设置边线(颜色,宽度等)
    • borderRadius 用来设置圆角

    side接收一个BorderSide类型的值,比较简单,这里就不介绍了,看一下构造方法

      const BorderSide({
        this.color = const Color(0xFF000000),
        this.width = 1.0,
        this.style = BorderStyle.solid,
      })
    
    

    borderRadius 接收一个BorderRadius类型的值,常用方法如下
    在这里插入图片描述
    我们可以把borderRadius分为上下左右四个方向,下面的方法都是对这四个方向进行设置,

    • all 配置所有方向
    • cricular 环形配置,跟all效果差不多,直接接收double类型的值
    • horizontal 只配置左右方向
    • only 可选左上,右上,左下,右下配置
    • vertical 只配置上下方向

    具体配置大家自行尝试

    我们来简单用一下

    BeveledRectangleBorder
    带斜角的长方形边框

    shape: BeveledRectangleBorder(
             side: BorderSide(
            color: Colors.white,
          ),
          borderRadius: BorderRadius.all(Radius.circular(10))
          ),
    
    

    在这里插入图片描述
    CircleBorder
    圆形边框

         shape: CircleBorder(
            side: BorderSide(
              color: Colors.white,
            ),
          ),
    
    

    在这里插入图片描述
    RoundedRectangleBorder
    圆角矩形

         shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.all(Radius.circular(10)),
          ),
    
    

    在这里插入图片描述
    StadiumBorder
    两端是半圆的边框

     shape: StadiumBorder(),
    

    在这里插入图片描述

    FlatButton

    FlatButton跟RaisedButton用法基本一致,下面我们就直接用一下

    /*扁平按钮*/
    class FlatBtn extends StatelessWidget {
      _log() {
        print("点击了扁平按钮");
      }
    
      @override
      Widget build(BuildContext context) {
        return FlatButton(
          onPressed: _log,
          child: Text("扁平按钮"),
          color: Colors.blue,
          textColor: Colors.black,
          shape: RoundedRectangleBorder(
              side: BorderSide(
                color: Colors.white,
                width: 1,
              ),
              borderRadius: BorderRadius.circular(8)),
        );
      }
    }
    
    

    在这里插入图片描述

    OutlineButton

    注意,OutlineButton是一个有默认边线且背景透明的按钮,也就是说我们设置其边线和颜色是无效的,其他属性跟MaterialButton中属性基本一致

    下面我们直接来使用

    
    /*带边线的按钮*/
    class outlineBtn extends StatelessWidget {
      _log() {
        print("点击了边线按钮");
      }
    
      @override
      Widget build(BuildContext context) {
        // TODO: implement build
        return OutlineButton(
          onPressed: _log,
          child: Text("边线按钮"),
          textColor: Colors.red,
          splashColor: Colors.green,
          highlightColor: Colors.black,
          shape: BeveledRectangleBorder(
            side: BorderSide(
              color: Colors.red,
              width: 1,
            ),
            borderRadius: BorderRadius.circular(10),
          ),
        );
      }
    }
    
    

    效果如下:
    在这里插入图片描述

    IconButton

    IconButton是直接继承自StatelessWidget的,默认没有背景
    我们来看一下他的构造方法

    const IconButton({
        Key key,
        this.iconSize = 24.0,
        this.padding = const EdgeInsets.all(8.0),
        this.alignment = Alignment.center,
        @required this.icon,
        this.color,
        this.highlightColor,
        this.splashColor,
        this.disabledColor,
        @required this.onPressed,
        this.tooltip
      }) 
    
    

    可以看到,icon是必填参数

    icon接收一个Widget,但是一般我们都是传入一个Icon Widget

    final Widget icon;
    

    其他属性跟MaterialButton中的属性用法基本一致

    我们来用一下

    /*图标按钮*/
    class IconBtn extends StatelessWidget {
      _log() {
        print("点击了图标按钮");
      }
    
      @override
      Widget build(BuildContext context) {
        return IconButton(
          icon: Icon(Icons.home),
          onPressed: _log,
          color: Colors.blueAccent,
          highlightColor: Colors.red,
        );
      }
    }
    
    

    效果如下
    在这里插入图片描述
    我们也可以传一个Text或其他Widget,这个大家自行尝试吧

    Flutter中Button内容大概就是这些

    展开全文
  • Android控件IconButton.zip

    2019-07-16 04:15:39
    IconButton 是 Android 的 Button 子类,可以设置图片与文字都居中。 标签:IconButton
  • Flutter中给我们预先定义好了一些按钮控件给我们用,常用的按钮如下 RaisedButton :凸起的按钮,其实就是Android中的Material Design风格的Button ,继承自MaterialButton FlatButton :扁平化的按钮,继承自...

    Flutter中的按钮

    Flutter中给我们预先定义好了一些按钮控件给我们用,常用的按钮如下

    • RaisedButton :凸起的按钮,其实就是Android中的Material Design风格的Button ,继承自MaterialButton
    • FlatButton :扁平化的按钮,继承自MaterialButton
    • OutlineButton :带边框的按钮,继承自MaterialButton
    • IconButton :图标按钮,继承自StatelessWidget

    我们先来看看MaterialButton中的属性,可以看到能设置的属性还是很多的。

      const MaterialButton({
        Key key,
        @required this.onPressed,
        this.onHighlightChanged,
        this.textTheme,
        this.textColor,
        this.disabledTextColor,
        this.color,
        this.disabledColor,
        this.highlightColor,
        this.splashColor,
        this.colorBrightness,
        this.elevation,
        this.highlightElevation,
        this.disabledElevation,
        this.padding,
        this.shape,
        this.clipBehavior = Clip.none,
        this.materialTapTargetSize,
        this.animationDuration,
        this.minWidth,
        this.height,
        this.child,
      }) : super(key: key);
    

    下面我们来看看常用属性

    属性 值类型 说明
    onPressed VoidCallback ,一般接收一个方法 必填参数,按下按钮时触发的回调,接收一个方法,传null表示按钮禁用,会显示禁用相关样式
    child Widget 文本控件
    textColor Color 文本颜色
    color Color 按钮的颜色
    disabledColor Color 按钮禁用时的颜色
    disabledTextColor Color 按钮禁用时的文本颜色
    splashColor Color 点击按钮时水波纹的颜色
    highlightColor Color 点击(长按)按钮后按钮的颜色
    elevation double 阴影的范围,值越大阴影范围越大
    padding EdgeInsetsGeometry (抽象类) 内边距
    shape ShapeBorder(抽象类) 设置按钮的形状
    minWidth double 最小宽度
    height double 高度

    而在Android中如果我们要修改按钮样式的话,需要通过selector和Shape等方式进行修改,相比较Flutter来说是要麻烦不少的


    RaisedButton

    RaisedButton的构造方法如下,由于继承自MaterialButton,所以MaterialButton中的大多数属性这边都能用,且效果一致,这里就不在赘述了

      const RaisedButton({
        Key key,
        @required VoidCallback onPressed,
        ValueChanged<bool> onHighlightChanged,
        ButtonTextTheme textTheme,
        Color textColor,
        Color disabledTextColor,
        Color color,
        Color disabledColor,
        Color highlightColor,
        Color splashColor,
        Brightness colorBrightness,
        double elevation,
        double highlightElevation,
        double disabledElevation,
        EdgeInsetsGeometry padding,
        ShapeBorder shape,
        Clip clipBehavior = Clip.none,
        MaterialTapTargetSize materialTapTargetSize,
        Duration animationDuration,
        Widget child,
      })
    

    下面我们来看一下属性

    onPressed
    接收一个方法,点击按钮时回调该方法。如果传null,则表示按钮禁用

     return RaisedButton(
          onPressed: null,
        );
    

    如下图所示
    在这里插入图片描述

    下面我们定义一个方法传给onPressed

    _log() {
        print("点击了按钮");
      }
    
      @override
      Widget build(BuildContext context) {
        return RaisedButton(
          onPressed: _log,
        );
      }
    

    在这里插入图片描述

    点击按钮后会调用log方法。
    在这里插入图片描述

    child
    按钮文本控件,一般都是传一个Text Widget

     return RaisedButton(
          onPressed: _log,
          child: Text("浮动按钮"),
        );
    

    在这里插入图片描述

    color
    按钮的颜色

    return RaisedButton(
          onPressed: _log,
          child: Text("浮动按钮"),
          color: Colors.red,
        );
    

    在这里插入图片描述

    textColor
    按钮的文本颜色

     return RaisedButton(
          onPressed: _log,
          child: Text("浮动按钮"),
          color: Colors.red,
          textColor: Colors.white,
        );
    

    在这里插入图片描述

    splashColor
    点击按钮时水波纹的颜色

       return RaisedButton(
          onPressed: _log,
          child: Text("浮动按钮"),
          color: Colors.red,
          textColor: Colors.white,
          splashColor: Colors.black,
        
        );
    

    在这里插入图片描述

    highlightColor
    高亮颜色,点击(长按)按钮后的颜色

        return RaisedButton(
          onPressed: _log,
          child: Text("浮动按钮"),
          color: Colors.red,
          textColor: Colors.white,
          splashColor: Colors.black,
          highlightColor: Colors.green,
        );
    

    在这里插入图片描述

    elevation
    阴影范围,一般不会设置太大

        return RaisedButton(
          onPressed: _log,
          child: Text("浮动按钮"),
          color: Colors.red,
          textColor: Colors.white,
          splashColor: Colors.black,
          highlightColor: Colors.green,
          elevation: 30,
        );
    

    在这里插入图片描述

    padding
    内边距,其接收值的类型是EdgeInsetsGeometry类型的,EdgeInsetsGeometry是一个抽象类,我们来看看其实现类
    在这里插入图片描述

    我们一般都用EdgeInsets类中的方法来设置padding
    常用方法如下

    //单独设置左上右下的间距,四个参数都要填写
    const EdgeInsets.fromLTRB(this.left, this.top, this.right, this.bottom);
    
    //单独设置左上右下的间距,四个均为可选参数
      const EdgeInsets.only({
        this.left = 0.0,
        this.top = 0.0,
        this.right = 0.0,
        this.bottom = 0.0
      });
      
      //一次性设置上下左右的间距
      const EdgeInsets.all(double value)
          : left = value, top = value, right = value, bottom = value;
      
    

    示例:

    EdgeInsets.all()

          padding: EdgeInsets.all(20)
    

    在这里插入图片描述

    EdgeInsets.fromLTRB()

    padding: EdgeInsets.fromLTRB(0,30,20,40)
    

    在这里插入图片描述

    EdgeInsets.only()

     padding: EdgeInsets.only(top: 30)
    

    在这里插入图片描述

    shape
    shape用来设置按钮的形状,其接收值是ShapeBorder类型,ShapeBorder是一个抽象类,我们来看看有哪些实现类

    在这里插入图片描述

    可以看到,实现类还是很多的,我们主要来看看常用的即可。

    • BeveledRectangleBorder 带斜角的长方形边框
    • CircleBorder 圆形边框
    • RoundedRectangleBorder 圆角矩形
    • StadiumBorder 两端是半圆的边框

    我们来简单用一用,在用之前我们先来看一下
    常用的两个属性

    • side 用来设置边线(颜色,宽度等)
    • borderRadius 用来设置圆角

    side接收一个BorderSide类型的值,比较简单,这里就不介绍了,看一下构造方法

      const BorderSide({
        this.color = const Color(0xFF000000),
        this.width = 1.0,
        this.style = BorderStyle.solid,
      })
    

    borderRadius 接收一个BorderRadius类型的值,常用方法如下
    在这里插入图片描述

    我们可以把borderRadius分为上下左右四个方向,下面的方法都是对这四个方向进行设置,

    • all 配置所有方向
    • cricular 环形配置,跟all效果差不多,直接接收double类型的值
    • horizontal 只配置左右方向
    • only 可选左上,右上,左下,右下配置
    • vertical 只配置上下方向

    具体配置大家自行尝试

    我们来简单用一下

    BeveledRectangleBorder
    带斜角的长方形边框

    shape: BeveledRectangleBorder(
             side: BorderSide(
            color: Colors.white,
          ),
          borderRadius: BorderRadius.all(Radius.circular(10))
          ),
    

    在这里插入图片描述

    CircleBorder
    圆形边框

         shape: CircleBorder(
            side: BorderSide(
              color: Colors.white,
            ),
          ),
    

    在这里插入图片描述

    RoundedRectangleBorder
    圆角矩形

         shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.all(Radius.circular(10)),
          ),
    

    在这里插入图片描述

    StadiumBorder
    两端是半圆的边框

     shape: StadiumBorder(),
    

    在这里插入图片描述


    FlatButton

    FlatButton跟RaisedButton用法基本一致,下面我们就直接用一下

    /*扁平按钮*/
    class FlatBtn extends StatelessWidget {
      _log() {
        print("点击了扁平按钮");
      }
    
      @override
      Widget build(BuildContext context) {
        return FlatButton(
          onPressed: _log,
          child: Text("扁平按钮"),
          color: Colors.blue,
          textColor: Colors.black,
          shape: RoundedRectangleBorder(
              side: BorderSide(
                color: Colors.white,
                width: 1,
              ),
              borderRadius: BorderRadius.circular(8)),
        );
      }
    }
    

    在这里插入图片描述


    OutlineButton

    注意,OutlineButton是一个有默认边线且背景透明的按钮,也就是说我们设置其边线和颜色是无效的,其他属性跟MaterialButton中属性基本一致

    下面我们直接来使用

    
    /*带边线的按钮*/
    class outlineBtn extends StatelessWidget {
      _log() {
        print("点击了边线按钮");
      }
    
      @override
      Widget build(BuildContext context) {
        // TODO: implement build
        return OutlineButton(
          onPressed: _log,
          child: Text("边线按钮"),
          textColor: Colors.red,
          splashColor: Colors.green,
          highlightColor: Colors.black,
          shape: BeveledRectangleBorder(
            side: BorderSide(
              color: Colors.red,
              width: 1,
            ),
            borderRadius: BorderRadius.circular(10),
          ),
        );
      }
    }
    

    效果如下:

    在这里插入图片描述


    IconButton

    IconButton是直接继承自StatelessWidget的,默认没有背景
    我们来看一下他的构造方法

    const IconButton({
        Key key,
        this.iconSize = 24.0,
        this.padding = const EdgeInsets.all(8.0),
        this.alignment = Alignment.center,
        @required this.icon,
        this.color,
        this.highlightColor,
        this.splashColor,
        this.disabledColor,
        @required this.onPressed,
        this.tooltip
      }) 
    

    可以看到,icon是必填参数

    icon接收一个Widget,但是一般我们都是传入一个Icon Widget

    final Widget icon;
    

    其他属性跟MaterialButton中的属性用法基本一致

    我们来用一下

    /*图标按钮*/
    class IconBtn extends StatelessWidget {
      _log() {
        print("点击了图标按钮");
      }
    
      @override
      Widget build(BuildContext context) {
        return IconButton(
          icon: Icon(Icons.home),
          onPressed: _log,
          color: Colors.blueAccent,
          highlightColor: Colors.red,
        );
      }
    }
    

    效果如下

    在这里插入图片描述

    我们也可以传一个Text或其他Widget,这个大家自行尝试吧

    Flutter中Button内容大概就是这些


    如果你觉得本文对你有帮助,麻烦动动手指顶一下,算是对本文的一个认可。也可以关注我的 Flutter 博客专栏,我会不定期的更新,如果文中有什么错误的地方,还望指正,转载请注明转自喻志强的博客 ,谢谢!

    展开全文
  • Flutter基础-IconButton

    千次阅读 2019-06-24 15:10:29
    0 Sample double _volume = 0.0; // ... Widget build(BuildContext context) { return Scaffold( body: Center( child: Column( mainAxisSize: MainAxisSize.min, children: <Wid...

    0

    Sample

    double _volume = 0.0;
    
    // ...
    
    Widget build(BuildContext context) {
      return Scaffold(
        body: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              IconButton(
                icon: Icon(Icons.volume_up),
                tooltip: 'Increase volume by 10',
                onPressed: () {
                  setState(() {
                    _volume += 10;
                  });
                },
              ),
              Text('Volume : $_volume')
            ],
          ),
        ),
      );
    }
    

    Sample in an App

    // Flutter code sample for material.IconButton.1
    
    // This sample shows an `IconButton` that uses the Material icon "volume_up" to
    // increase the volume.
    
    import 'package:flutter/material.dart';
    
    void main() => runApp(MyApp());
    
    /// This Widget is the main application widget.
    class MyApp extends StatelessWidget {
      static const String _title = 'Flutter Code Sample';
    
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: _title,
          home: Scaffold(
            appBar: AppBar(title: Text(_title)),
            body: MyStatefulWidget(),
          ),
        );
      }
    }
    
    double _volume = 0.0;
    
    class MyStatefulWidget extends StatefulWidget {
      MyStatefulWidget({Key key}) : super(key: key);
    
      @override
      _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
    }
    
    class _MyStatefulWidgetState extends State<MyStatefulWidget> {
      Widget build(BuildContext context) {
        return Scaffold(
          body: Center(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                IconButton(
                  icon: Icon(Icons.volume_up),
                  tooltip: 'Increase volume by 10',
                  onPressed: () {
                    setState(() {
                      _volume += 10;
                    });
                  },
                ),
                Text('Volume : $_volume')
              ],
            ),
          ),
        );
      }
    }
    

    Adding a filled background

    Sample

    Widget build(BuildContext context) {
      return Center(
        child: Container(
          child: Ink(
            decoration: ShapeDecoration(
              color: Colors.lightBlue,
              shape: CircleBorder(),
            ),
            child: IconButton(
              icon: Icon(Icons.android),
              color: Colors.white,
              onPressed: () {
                print("filled background");
              },
            ),
          ),
        ),
      );
    }
    

    Sample in an App

    // Flutter code sample for material.IconButton.2
    
    // In this sample the icon button's background color is defined with an [Ink]
    // widget whose child is an [IconButton]. The icon button's filled background
    // is a light shade of blue, it's a filled circle, and it's as big as the
    // button is.
    
    import 'package:flutter/material.dart';
    
    void main() => runApp(MyApp());
    
    /// This Widget is the main application widget.
    class MyApp extends StatelessWidget {
      static const String _title = 'Flutter Code Sample';
    
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: _title,
          home: Scaffold(
            appBar: AppBar(title: Text(_title)),
            body: MyStatelessWidget(),
          ),
        );
      }
    }
    
    /// This is the stateless widget that the main application instantiates.
    class MyStatelessWidget extends StatelessWidget {
      MyStatelessWidget({Key key}) : super(key: key);
    
      @override
      Widget build(BuildContext context) {
        return Center(
          child: Container(
            child: Ink(
              decoration: ShapeDecoration(
                color: Colors.lightBlue,
                shape: CircleBorder(),
              ),
              child: IconButton(
                icon: Icon(Icons.android),
                color: Colors.white,
                onPressed: () {
                  print("filled background");
                },
              ),
            ),
          ),
        );
      }
    }
    
    展开全文
  • 1.继承关系 Icon: Object &gt; Diagnosticable &gt; DiagnosticableTree &gt; Widget &gt; StatelessWidget &gt; Icon ImageIcon: Object &gt; Diagnosticable &... ...
  • Flutter 中 IconButton 点击效果未生效

    千次阅读 2019-07-19 10:52:35
    Flutter 出了有段时间了,也在逐渐迭代版本,当然...咱们先忽略为啥不用自带的效果啥的,就是想自己造(练)轮(代)子(码),结构简单嘛,按照 Flutter 的思路一层一层套,Container啊、Stack啊、Text啊、IconButton啊…...
  • WPF 自定义IconButton

    2016-09-04 02:15:00
    自定义一个按钮控件 按钮控件很简单,我们在项目中有时把样式封装起来,添加依赖属性,也是为了统一。 这里举例,单纯的图标控件怎么...UserControl x:Class="WpfApplication12.IconButton" xmlns="http://schemas.m...
  • WPF 自定义IconButton

    2016-09-06 14:42:00
    自定义一个按钮控件 按钮控件很简单,我们在项目中有时把样式封装起来,添加依赖属性,也是为了统一。...UserControl x:Class="WpfApplication12.IconButton" xmlns="http://schemas.microsoft.com/w...
  • Flutter中给我们预先定义好了一些按钮控件给我们用,常用的按钮如下 RaisedButton :凸起的按钮,其实就是Android中的Material Design风格的Button ,继承自MaterialButton FlatButton :扁平化的按钮,继承自...
  • WPF 自定义IconButton

    2016-09-04 02:15:00
    自定义一个按钮控件 按钮控件很简单,我们在项目中有时把样式封装起来,添加依赖属性,也是为了统一。...UserControl x:Class="WpfApplication12.IconButton" xmlns="http://schemas.microsoft.com/win...
  • 在用Flutter的IconButton组件时,发现有的图标设置显示出来是黑色的,我们看看写法 IconButton(icon: Icon(Icons.account_circle,size: px(60),color: Colors.lightBlue,) 后面有个color的属性,我们打开源码找到...
  • 图标组件(Icon)为展示图标的组件,该组件不可交互,要实现交互的图标,可以考虑使用IconButton组件。图标组件相关的组件有一下几个: IconButton:可交互的Icon。 Icons:框架自带Icon集合。 IconTheme:Icon...
  • WPF 自定义IconButton

    2018-09-25 08:55:00
    原文:WPF 自定义IconButton 自定义一个按钮控件 按钮控件很简单,我们在项目中有时把样式封装起来,添加依赖属性,也是为了统一。 这里举例,单纯的图标控件怎么设置 1、UserControl界面样式 <UserControl x:...
  • Flutter IconButton点击阴影效果去除

    千次阅读 2020-01-11 15:44:26
    IconButton 长按时会有一层类似evelotion的阴影效果 但是IconButton并没有evelotion这个参数 我们可以通过设置 splashColor: Colors.transparent, highlightColor: Colors.transparent, 这两个参数达到消除”阴影的...
  • 本文介绍一下一个小众的开源项目——IconButton。 本文原创,转载请注明出处: 简介 这是一个老外两年前写的项目,见:https://github.com/pnc/IconButton。它可以使一个Button的图片与文字一起居中,如下图: ...
  • flutter控件练习demo地址:github button种类 所谓的 button 就是都有 onPressed 属性, 可以点击响应事件的 , 有点击的效果 , 如果 onPressed 设置为 null 的... MaterialButton 有主题的button,官网不推荐使用...
  • 如上图所示,受移动端界面设计的影响,pc客户端上的界面设计也越来越多的出现类似的界面,传统的QPushButton和QToolButton,无论是添加image还是添加icon,都无法满足这样的UI设计需求,退而求其次,只能用QWidget...
  • WPF 自定义IconButton

    2018-09-25 08:55:00
    WPF 自定义IconButton 原文:WPF 自定义IconButton自定义一个按钮控件 按钮控件很简单,我们在项目中有时把样式封装起来,添加依赖属性,也是为了统一。 这里举例,单纯的图标控件怎么设置 1、...
  • WPF: IconButton

    千次阅读 2008-02-12 23:06:00
    原文链接:http://www.codeproject.com/KB/WPF/WPF-IconButton.aspx 下载 WpfIconButtonDemo - 278.43 KB 介绍我看到了许多使用Expression Blend创建十分漂亮的按钮(Button)的演示视频,但是却没有找到一个是详细...

空空如也

1 2 3 4 5 ... 20
收藏数 1,865
精华内容 746
热门标签
关键字:

IconButton