精华内容
下载资源
问答
  • IconButton

    2011-05-18 11:33:43
    CButton IconButton MFC VC 自绘按钮 透明按钮 在VS2005下测试通过
  • IconButton: Object > Diagnosticable > DiagnosticableTree > Widget > StatelessWidget > IconButton 2.Icon 2.1 介绍 图形图标,来自于所述的字体的字形绘制。图标不可交互式。 创建Icon对象要有...

    1.继承关系

    Icon:            Object > Diagnosticable > DiagnosticableTree > Widget > StatelessWidget > Icon

    ImageIcon:  Object > Diagnosticable > DiagnosticableTree > Widget > StatelessWidget > ImageIcon

    IconButton: Object > Diagnosticable > DiagnosticableTree > Widget > StatelessWidget > IconButton

    2.Icon

    2.1 介绍

    图形图标,来自于所述的字体的字形绘制。图标不可交互式。

    创建Icon对象要有IconData成员,而IconData可以从Icons类中直接获取!

    如:new Icon(Icons.menu);

     

    在配置文件pubspec.yaml里有说明:

      # The following line ensures that the Material Icons font is included with your application, so that you can use the icons in the material Icons class.(下面一行确保应用程序中包含了Material Icons字体,以便您可以在Material Icons类中使用图标。)

      uses-material-design: true

     

    要使用flutter提供的icon要配置上面一行,才能使用Material Icons字体,如new Icon(Icons.menu);

    icon有以下图标,图标对应值查看https://material.io/tools/icons/?style=baseline或者Icons文档

    图片地址:https://raw.githubusercontent.com/flutter/cupertino_icons/master/map.png

    2.2 参数详解

      const Icon(this.icon, {
        Key key,
        this.size,
        this.color,
        this.semanticLabel,
        this.textDirection,
      }) : super(key: key);

    2.2.1 Key key

    参数Key key:官方解释:https://flutterchina.club/widgets-intro/#key

    2.2.2 double size

    逻辑像素中图标的大小(pt.dp)。由于图标是正方形,设置size等于同时设置了宽高。

    默认为当前IconTheme大小(如果有)。如果没有 IconTheme,或者它没有指定显式大小,则默认为24.0(带逻辑像素单位)。

    2.2.3 Color color

    设置图标颜色,如果没设置以主题是黑色则图标颜色默认为白色,如果主题较浅则图标颜色默认为黑色。

    2.2.4 String semanticLabel

    帮助盲人或者视力有障碍的用户提供语言辅助描述

    2.2.5 TextDirection textDirection

    渲染图标的方向,前提需要IconData.matchTextDirection字段设置为true,如Icons类里

      static const IconData backspace = IconData(0xe14a, fontFamily: 'MaterialIcons', matchTextDirection: true);

      static const IconData backup = IconData(0xe864, fontFamily: 'MaterialIcons');

    backup不支持,而backspace 支持textDirection

    2.3 意外收获

    从下面的地址下载和使用google提供的fonts,使用不同字体,丰富APP!

    https://github.com/google/fonts

    https://fonts.google.com/

    推荐从阿里巴巴矢量图库:http://www.iconfont.cn/

    相关使用教程:http://www.iconfont.cn/help/detail?helptype=code

    3 ImageIcon

    3.1 介绍

    自定义图形图标,来自于图片绘制。图标不可交互式。

    3.2 参数详解

      const ImageIcon(this.image, {
        Key key,
        this.size,
        this.color,
        this.semanticLabel,
      }) : super(key: key);

    比起Icon,不同之处就是用自定义ImageProvider来定义图标

    ImageProvider在文章:《Flutter Image 参数详解》讲解过,有五种

    示例: ImageIcon(AssetImage('images/test.png'), color: Colors.red,);

    说明一下,图片一定要png,加载出来是纯色的背景图片,颜色通过color定义

    如原图test.png:

    输出效果图:

     

    4 IconButton

    4.1 介绍

    图形图标,可交互式的

    4.2 参数详解

      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
      }) : assert(iconSize != null),
           assert(padding != null),
           assert(alignment != null),
           assert(icon != null),
           super(key: key);

    4.2.1 EdgeInsetsGeometry  padding

    《Flutter Container 参数详解》2.3详解过,略

    4.2.2 AlignmentGeometry alignment

    《Flutter Container 参数详解》2.2详解过,略

    4.2.3 Widget icon

    一个任意Widget控件做为icon

    4.2.4 Color color

    如果设置了图标点击回调,则用于按钮内图标的颜色。(笔者试不出color效果!!!)

    4.2.5 Color highlightColor

    按钮处于向下(按下)状态时按钮的辅助颜色。

    4.2.6 Color splashColor

    按钮处于向下(按下)状态时按钮的主要颜色。

    初始叠加层的中心点与用户触摸事件的生命点相匹配。如果触摸持续足够长的时间,飞溅叠加将扩展以填充按钮区域。如果初始颜色具有透明度,则突出显示和按钮颜色将显示。

    4.2.7 Color disabledColor

    如果没设置图标点击回调,则用于按钮内图标的颜色。(笔者试不出disabledColor效果!!!)

    4.2.8 VoidCallback onPressed

    点击或以其他方式激活按钮时调用的回调。

    如果将其设置为null,则将禁用该按钮。

    4.2.9 String tooltip

    描述按下按钮时将发生的操作的文本。

    当用户长按按钮并用于辅助功能时,将显示此文本。

    如下示例『I is IconButton tooltip』

    5.示例

     

    代码:

     Widget getIconRow() {
        return new Row(mainAxisAlignment: MainAxisAlignment.spaceAround, children: [
          new Expanded(flex: 1, child: getIcon()),
          new Expanded(flex: 1, child: getIconWithColor()),
          new Expanded(flex: 1, child: getImageIcon()),
          new Expanded(flex: 1, child: getIconButtonText()),
          new Expanded(flex: 1, child: getIconButtonImage())
        ]);
      }
    
      Widget getIcon() {
        return Icon(
          Icons.backup,
        );
      }
    
      Widget getIconWithColor() {
        return Icon(
          Icons.backspace,
          color: Colors.blue,
          textDirection: TextDirection.ltr,
        );
      }
    
      Widget getImageIcon() {
        return ImageIcon(
          AssetImage('images/test.png'),
          color: Colors.red,
          size: 50,
        );
      }
    
      Widget getIconButtonText() {
        return IconButton(
    //      onPressed: pressedIconBtn,
          icon: getTextRich(),
          color: Colors.blue,
          iconSize: 50,
          highlightColor: Color(0x991B5E20),
          splashColor: Color(0x990D47A1),
          disabledColor: Color(0xFF0D47A1),
          tooltip: "I is IconButton tooltip",
        );
      }
    
      Widget getIconButtonImage() {
        return IconButton(
    //      onPressed: null,
          onPressed: pressedIconBtn,
          icon: getImage(),
    //      color: Colors.blue,  // 无用!!!
          iconSize: 50,
          highlightColor: Color(0x991B5E20),
          splashColor: Color(0x990D47A1),
          disabledColor: Color(0xFF0D47A1), // 无用!!!
        );
      }
    
      void pressedIconBtn() {}
    
      Widget getImage() {
        return new Image.asset(
          'images/test.png',
    //      width: 300.0,
    //      height: 300.0,
          matchTextDirection: false,
          fit: BoxFit.fitWidth,
    //      repeat: ImageRepeat.repeat,
    //      filterQuality: FilterQuality.high,
    //          color: Colors.black,
    //          colorBlendMode: BlendMode.xor,
        );
      }
    
      Widget getTextRich() {
        List children = new List<TextSpan>();
        children.add(TextSpan(text: "Chen", style: TextStyle(color: Colors.black)));
        children.add(TextSpan(text: "Ying", style: TextStyle(color: Colors.red)));
        children.add(TextSpan(text: "you", style: TextStyle(color: Colors.blue)));
        List children1 = new List<TextSpan>();
        children1.add(
            TextSpan(text: "  Is  ", style: TextStyle(color: Colors.blueAccent)));
        children1.add(
            TextSpan(text: "Androider", style: TextStyle(color: Colors.amber)));
        children.add(
            TextSpan(children: children1, style: TextStyle(color: Colors.blue)));
        TextSpan textSpan = new TextSpan(children: children);
        return Text.rich(
          textSpan,
        );
      }
    

    6.参考:

    https://docs.flutter.io/flutter/widgets/Icon-class.html

    https://docs.flutter.io/flutter/material/Icons-class.html

    https://docs.flutter.io/flutter/material/IconButton-class.html

    sdk源码

    展开全文
  • Flutter 中 IconButton 点击效果未生效

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

    Flutter 出了有段时间了,也在逐渐迭代版本,当然坑也都是逐渐踩出来的

    今天来聊个IconButton 点击效果(水波纹)丢失的问题,其他带水波纹效果的同理。
    当你兴致冲冲的撸了一段代码,比如这样的
    页面标题,带有一个返回按钮
    咱们先忽略为啥不用自带的效果啥的,就是想自己造(练)轮(代)子(码),结构简单嘛,按照 Flutter 的思路一层一层套,Container啊、Stack啊、Text啊、IconButton啊…,撸完码,开心运行下,哎呦我擦,效果符合预期嘛,开心开心(手动笑脸+10),点击下看看效果,卧槽,我的 IconButton 的点击效果呢??????

    问题排查:

    splashColor、highlightColor 都写了啊,多次测试无果,遂至QQ群 (Flutter官方社区_771482762) 求问大神,因为我用到了Stack ,就涉及Positioned ,大神跟我说调整下Positioned 位置看看,在此感谢大神提供的思路,因为在测试过程中端倪渐现,因为我的标题背景是渐变色的 BoxDecoration,当 IconButton 挪到右侧有透明度的区域,点击效果有一点痕迹了,于是开始调整 外层 Container 的 decoration 属性,发现果然是被遮盖了,But… 不应该是层层嵌套的吗?怎么就内容在里面显示的好好的,结果点击效果却被覆盖了呢?

    百度无果,没备梯子,多次改代码尝试后,确认了问题,想去官方 GitHub 去提个 Issue,查了下,发现已经有人提过类似的 Issue,看看内容以及提及的其他讨论过该问题的 StackOverflow 页面 ,一番查阅之后,明白了,点击效果是水波纹的,这玩意需要在最近的一个Material类控件里绘制,并不是在使用的控件的本体使用,所以我的问题就明确了,点击效果被绘制到外面了。
    调整Icon大小之后,确认点击效果确实被覆盖了

    解决之道

    咱给IconButton 加一层Material 嵌套(为了简化,此处代码对应下面的效果,不是蓝色标题的)
    咱给IconButton加一层Material嵌套

    注意 Material 的 color、shape 属性,
    注意 Material 的 color、shape 属性,
    注意 Material 的 color、shape 属性,
    重要事情说三遍,详解此处略,一试便知~
    效果有了:
    简化的代码对应的效果图

    代码片段

      Widget _getContainerWithDecoration() {
        return Container(
          height: 48,
          width: Size.infinite.width,
          child: Material(
              color: Colors.transparent,
              shape: CircleBorder(),
              child: IconButton(
                  iconSize: 32,
                  color: Colors.white,
                  icon: Icon(Icons.navigate_before),
                  splashColor: Colors.red,
                  highlightColor: Colors.green,
                  onPressed: () {
                    Fluttertoast.showToast(msg: '测试');
                  })),
          decoration: BoxDecoration(
            gradient: LinearGradient(
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
              colors: [
                Color(0xFF00A0FF),
                Color(0xFF20A0FF),
                Color(0x8000A0FF),
              ],
            ),
          ),
        );
      }
    }
    

    如有谬误,欢迎各位斧正!

    展开全文
  • 通过添加 splashColor: Colors.transparent,highlightColor: Colors....IconButton( splashColor: Colors.transparent, highlightColor: Colors.transparent, // 已收藏 icon: Icon(Icons.star,color:Color.fro

    通过添加 splashColor: Colors.transparent,highlightColor: Colors.transparent,修改点击时的背景效果

    IconButton(
                splashColor: Colors.transparent,
                highlightColor: Colors.transparent,
                // 已收藏
                icon: Icon(Icons.star,color:Color.fromRGBO(246, 211, 102, 0.5)),
                onPressed: (){
                  setState(() {
                    _hasStar = false;
                  });
                  print('取消了收藏按钮');
                },
              )
    
    展开全文
  • IconButton中padding的默认值是8.0 const IconButton({ Key? key, this.iconSize = 24.0, this.visualDensity, this.padding = const EdgeInsets.all(8.0), this.alignment = Alignment.center, this....

    转载:Padding调小解决方案

    IconButton中padding的默认值是8.0。因为IconButton遵守Material Design设计规则,需要将边距的最小值设置为48px,所以无法调小padding。

    const IconButton({
        Key? key,
        this.iconSize = 24.0,
        this.visualDensity,
        this.padding = const EdgeInsets.all(8.0),
        this.alignment = Alignment.center,
        this.splashRadius,
        ......
    
    }

    调小的解决方案:

    方案1、

    Container(
      padding: const EdgeInsets.all(0.0),
      width: 30.0, // you can adjust the width as you need
      child: IconButton(
      ),
    ),

    方案2、

    GestureDetector( onTap: () {}, child: Icon(Icons.volume_up) ) 

     

    展开全文
  • IconButton 是一个老外大概两年前写的 Android 控件,可以让drawableLeft或drawableRight设置的图片与文字一起居中(那些用一个layout套一个ImageView和一个TextView来实现的感到解放了没?),效果如下图。 基于...
  • WPF 自定义IconButton

    2018-09-25 08:55:00
    原文:WPF 自定义IconButton 自定义一个按钮控件 按钮控件很简单,我们在项目中有时把样式封装起来,添加依赖属性,也是为了统一。 这里举例,单纯的图标控件怎么设置 1、UserControl界面样式 <UserControl x:...
  • 在用Flutter的IconButton组件时,发现有的图标设置显示出来是黑色的,我们看看写法 IconButton(icon: Icon(Icons.account_circle,size: px(60),color: Colors.lightBlue,) 后面有个color的属性,我们打开源码找到...
  • splashColor: Colors.transparent, highlightColor: Colors.transparent,
  • Flutter IconButton点击阴影效果去除

    千次阅读 2020-01-11 15:44:26
    IconButton 长按时会有一层类似evelotion的阴影效果 但是IconButton并没有evelotion这个参数 我们可以通过设置 splashColor: Colors.transparent, highlightColor: Colors.transparent, 这两个参数达到消除”阴影的...
  • Flutter里面有很多的Button组件很多,常见的按钮组件有:RaisedButton,FlatButton,IconButton,OutlineButton,ButtonBar,FloationActionButton等.. 组件 描述 RaisedButton 凸起的按钮,其实就是...
  • IconButton :图标按钮,继承自StatelessWidget 我们先来看看MaterialButton中的属性,可以看到能设置的属性还是很多的。 const MaterialButton({ Key key, @required this .onPressed, this ....
  • 图标(Icon)和图标按钮(IconButton

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

    2019-07-16 04:15:39
    IconButton 是 Android 的 Button 子类,可以设置图片与文字都居中。 标签:IconButton
  • Flutter基础-IconButton

    千次阅读 2019-06-24 15:10:29
    } 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/...
  • IconButton 一个带logo和描述的按钮 是一个react-native的按钮组件。
  • 如何在Flutter中调整IconButton的大小(高度和宽度)?似乎需要默认的宽度和高度。没有height或width属性。 new IconButton( padding: new EdgeInsets.all(0.0), color: themeData.primaryColor, icon: new Icon...
  • IconButton::IconButton(QWidget* parent) : QPushButton(parent) { QSizePolicy sizePolicy(QSizePolicy::Minimum, QSizePolicy::Preferred); sizePolicy.setHorizontalStretch( 0 ); sizePolicy....
  • 本文介绍一下一个小众的开源项目——IconButton。 本文原创,转载请注明出处: 简介 这是一个老外两年前写的项目,见:https://github.com/pnc/IconButton。它可以使一个Button的图片与文字一起居中,如下图: ...
  • IconButton ToggleButton Flutter 1.9 新推出的一个组件; IconButton 案例 icon:icon组件,可以用原生的封装; onPressed:匿名函数,实现的点击事件; 代码: IconButton( icon: Icon...
  • <p>This PR addresses issue #416 increasing the clickable area of the .IconButton. <h2>PR Checklist <ul><li>[x] I have read the relevant <code>readme.md</code> file(s)</li><li>[x] All commits follow ...
  • BackButton 一个 Icon 是 返回键头的IconButton,点击会调用 Navigator.maybePop 返回上一个路由 , 默认长按提示是 back ,且不可去掉 CloseButton 一个 Icon 是 x(关闭)的IconButton,点击会调用 Navigator....
  • 文章目录1、IconButton2、FloatingActionButton3、DropdownButton4、RawMaterialButton 1、IconButton 只介绍和RaisedButton属性不一样的地方,和RaisedButton属性一样的请看这:...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,444
精华内容 977
关键字:

IconButton