文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

【Flutter】Icons 组件 ( FlutterIcon 下载图标 | 自定义 svg 图标生成 ttf 字体文件 | 使用下载的 ttf 图标文件 )

文章目录 一、FlutterIcon 下载图标 二、自定义 svg 图标生成 ttf 字体文件 三、使用下载的 ttf 图标文件 四、完整代码示例 五、相关资源 一、FlutterIcon 下载图标 -...10 个图标 , 然后点击右上角的 DOWNLOAD 按钮 , 该网站会在后台将这 10 个图标的 SVG 文件打包到 ttf 文件中 , 下载的文件是 flutter-icons-5b92b65c.zip...: 拖动完成后 , 页面中的 Custom Icons 区域会显示这 20 个 SVG 图标 ; 选中这些图标 , 点击 DOWNLOAD 按钮 , 即可下载生成的 ttf 格式的文件 ;...: 图标绘制方向 , 是否按照 svg 文件中的方向绘制 ; 代码中使用 IconData 加载自定义图标 , 3D图标对应的编码是 0xe855 ; Center( // 加载自定义图标...child: Icon(IconData(0xe855, fontFamily: "MyFlutterApp",), size: 200,), ), 运行效果 : 第一个图标就是加载的自定义图标 ;

2.6K20

Android学习（简单使用Bottom Navigation Activity来实现底部导航栏）

自定义底部导航 现在的底部导航只有三个选项，而且图标文字都是固定我。那么我们想增加导航或者改变图标文字应该怎么办呢？...，icon属性是图标这是下载地址。...我们再看已经出现了第四个图标（最多5个）。那么如何更改点击后的页面呢？ 自定义切换页面（Fragment） 这里我们使用framgment来切换页面。...定制导航栏 对于导航栏的定制和之前大体相同，如果我们要新添一个自己的导航页可以这样操作：menu文件夹下的bottom_nav_menu.xml对应底部的导航图标，添加自己的item。...如果要修改页面的ui，就在对应的fragment_layout文件下修改。上述文件下的app:startDestination="@+id/navigation_home"是设置默认启动页面的。

2.5K10
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    鸿蒙原生应用从设置页看自定义组件的使用

    ，布局是一样的，这样的情况下我们可以考虑用自定义组件去实现 自定义组件的三个特点 自定义组件的特点 自定义组件具有以下特点： 可组合：允许开发者组合使用系统组件、及其属性和方法。...自定义组件的基本结构 struct：自定义组件基于struct实现，struct + 自定义组件名 + {...}的组合构成自定义组件，不能有继承关系。对于struct的实例化，可以省略new。...了解了自定义组件的基本结构以后，我们来实现一下设置页的自定义组件，如下代码所以。...不允许在aboutToDisappear函数中改变状态变量，特别是@Link变量的修改可能会导致应用程序行为不稳定。 从API version 9开始，该接口支持在ArkTS卡片中使用。...(): void | boolean 当用户点击返回按钮时触发，仅@Entry装饰的自定义组件生效。 参考资料 阿里图标库[1] 这样自定义组件的使用就完成了。

    73510

    BottomNavigationView使用，配合ViewPager、修改图标大小、去掉文字等

    目录 1、布局 2、常用属性 3、设置监听 4、默认选中 5、配合ViewPager 6、添加角标 7、修改图标大小 8、去除波纹效果 9、Github MaterialDesign中的一个底部导航栏...，对应icon 也可以是一个selector 3、设置监听 private BottomNavigationView.OnNavigationItemSelectedListener mOnNavigationItemSelectedListener...BottomNavigationView的item也选中，BottomNavigationView的item选中的时候让ViewPager切换page 6、添加角标 查看：BottomNavigationView...添加角标（BadgeView） 7、修改图标大小 源码开放方法： /** * Set the size to provide for the menu item icons...app:itemBackground="@null" 我目前简单粗暴的方案，设置波纹颜色和背景颜色一致，达到看不出的效果。。

    1.6K60

    再不迁移到Material Design Components 就out啦

    它使用AppCompat主题，设计支持库中的小部件（包括具有自定义背景的按钮）以及需要迁移的各种其他元素。...Button 改变 从 Design 库到 MDC ，样式变成 Theme.MaterialComponents.* 后有了一些变化。拿 Button 来举例，Button失去了自定义背景。...和 AppCompat 一样，MDC 会在填充的时候用 MDC 等效的控件来替换某些原始控件。这样就可以发布新功能和错误修正了，而不必将所有声明都换成新的类型。...但是，升级后，您可能会注意到某些控件颜色和其他属性的某些意外更改。 ? 在上面的示例中，按钮发生了变化、文本和图标的颜色发生了变化。FAB 现在变成了蓝绿色，并且文本字段看起来完全不同。不用担心。...，以使用自定义字体系列，XML或通过Android Studio 下载字体： <!

    3.2K30

    Android BottomNavigationView的最新用法

    Android 的技术更新的太快了，比如：kotlin、jetpack 等等，要学习的东西实在是太多了，今天我就来介绍一下 BottomNavigationView 的最新用法以及注意事项。...先来看一下效果图吧： 1.gif 一、导入需要的依赖包 在 app 的 build.gradle 文件中导入以下依赖包： implementation 'com.google.android.material...中 labelVisibilityMode 属性的用法，设置 app:labelVisibilityMode="labeled" 可以将图标和文字全部展示出来。...id 名称 一定要和 bottom_nav_menu.xml 中 item 的 id 名称保持一致，否则无法切换 tab 五、创建 MainActivity.kt package com.pzj.android_bottomnavigationview...中 labelVisibilityMode 属性的用法，设置 app:labelVisibilityMode=“labeled” 可以将图标和文字全部展示出来。

    1.1K10

    羊皮书APP（Android版）开发系列（十七）Android 底部菜单栏实现

    app的底部菜单栏是非常常见的，微信／qq／支付宝／糯米等都有这样的底部菜单栏，在我们日常的开发过程中也是会经常用到的，下面就是一种实现方式，供大家参考。...首先看下效果图： 未标题-1.png 自定义底部导航布局BottomNavigationView，代码如下： package cn.studyou.navigationviewlibrary; import...，接下来就可以在我们的Activity中使用了，这里我们采用Activity+Fragment的方式实现布局的切换。...match_parent" android:gravity="center" android:text="@string/message" /> 菜单的图标是使用...，其实很好理解，就是使用一个自定义的布局和Fragment结合来实现的，自定义布局我们都要理解，Fragment使用方式我们更要熟悉。

    1.5K20

    【错误记录】Kotlin 中 Lambda 表达式返回值报错 ( ‘return‘ is not allowed here | 匿名内部类 | 尾随 Lambda 规范 - Lambda 替换接口 )

    一、错误记录 在 Android 中 , 使用 Kotlin 开发 , 为 BottomNavigationView 设置 OnNavigationItemSelectedListener 监听接口 ;...设置的接口是一个匿名内部类 BottomNavigationView.OnNavigationItemSelectedListener 对象 , 其中定义了一个 boolean onNavigationItemSelected...调用 setOnNavigationItemSelectedListener 函数 , 设置的监听器是 BottomNavigationView.OnNavigationItemSelectedListener...类型的匿名内部类 ; 最原始的设置方式如下 , 首先创建 BottomNavigationView.OnNavigationItemSelectedListener 类型的 对象表达式 , 也就是匿名内部类...; 在 Kotlin 中 , return 语句默认是从最近的封闭函数返回的 , 而在 lambda 表达式中使用 return 时 , 它会尝试从包含它的函数返回 ; 三、解决方案 在 Lambda

    13210

    听说谷歌Baba更新了 Material UI ...

    Bottom App Bar Material Design的一个重要特征是设计 BottomAppBar。可适应用户不断变化的需求和行为，So，BottomAppBar是一个从标准物质指导的演变。...来控制FAB的放置； （FabAlignmentMode）可以设置为中心或结束。...如果FabAttached设置为True，那么Fab将被布置为连接到BottomAppBar； FabCradleMargin是设置FAB和BottomAppBar之间的间距，改变这个值会增加或减少...上的app：menu属性设置为菜单资源； 设置选择监听事件setOnNavigationItemSelectedListener(…)。...持久性底部页面是从屏幕底部出现的视图，在主要内容上升高。他们可以垂直拖动以暴露他们的内容列表。 注意：如果要使用模态（对话框）的底页，请使用 BottomSheetDialogFragment。

    3K20

    Android Navigation + Fragment 制作APP主页面导航（步骤 + 源码）

    添加好之后，点击Sync进行项目同步，同步时会自动下载这些依赖库并配置到你的项目中。...然后这个时候你再试一下，从A到B，然后点击系统返回键，就会返回到A，然后再点一下返回键就会退出当前应用。 神不神奇？...可以看到，底部的导航栏已经出来了，而且还可以点击，点击之后还有动画效果，并且图标和文字的颜色还有变化，因为实际上我只是放了灰色图标而已。...那么这些工作就都是BottomNavigationView帮我们完成的，的确是省了不少事情，当然这个动画效果和点击之后的颜色都是可以让开发者自行改的。...不过在运行之前把BFragment中接收参数并且弹Toast的代码删掉，否则切换的时候拿不到这个参数，就会ANR。 运行看看吧。 ? 下面来改一下切换后的图标颜色和文字颜色吧。

    10.2K42

    安卓Navigation系列——进阶篇

    、FrgmentTabHost、TabLayout或者自定义view等方式，但这些都离不开经典的FragmentManager来管理fragment之间的切换。...FragmentHome，神奇的事情发生了，原来的FragmentHome销毁了，却又重新创建了一个新的FragmentHome实例，即fragment的重绘，并且从log日志中也可以看到，刚刚打开的FragmentDiscover...[k8q1t7a9gl.png] 下面从源码角度分析为什么会这样。...明明已经调用addNavigator方法添加自定义的FixFragmentNavigator了。...那么我们是不能在布局文件中通过app:navGraph属性指定自定义的导航资源文件了，只能在布局文件中去掉app:navGraph这个属性，然后在添加FixFragmentNavigator的同时，通过代码将导航资源文件设置进去

    3.2K30

    Android使用BottomNavigationView以及如何使用SVG图片

    SVG图片的使用 iconfont:https://www.iconfont.cn/ 我们经常在iconfont上找图片 然后下载下载放在项目里面，为了适配我们还要下载不同尺寸的图片，但是明明iconfont...我们在下载图片的时候，最后有一项复制SVG 我们复制出来的如下 BottomNavigationView的使用 实现底部菜单常用的方式 RadioGroup + ViewPager + Fragment 加载相邻的Fragment FragmentTabHost...+ Fragment 加载选中的Fragment BottomNavigationView 有选中动画效果 之前我都是用前两种方式来做的 既然官方有现成的 还是推荐用官方的，毕竟有动画效果。...(我之前还以为只有矢量的才能着色,其实无论菜单中的图片是否为矢量图都可以设置着色) res => color => main_bottom_navigation.xml <?

    1.8K10

    自定义字体

    如小米笔记本 Air： 这里我们可以看到其使用了'F5130a'字体，但是这个酷炫的高端字体我们的电脑里面都没有，它其实就是该站点自定义设置的字体。 那么如何实现自定义字体的效果呢？...浏览器兼容性 .eot 浏览器兼容性 .svg 浏览器兼容性 如何兼容 通过上面我们可以了解到若在使用 [@font-face](/user/font-face) 规则时仅仅考虑一种字体格式，则可能导致在某些浏览器中无法生效...Browsers */ } 自定义图标字体（iconfont） 自定义字体平时其实使用还是非常少的，不过它还有一个应用非常广的领域——自定义图标字体（iconfont）。...首先我们先去Fontello这个图标字体库去选中几个图标： 然后下载下来，解压如下： 通过浏览器打开我们的 demo.html 文件就可以看到我们下载到的字体图标效果。...class^="icon-"]:before, [class*=" icon-"]:before 使用该自定义字体，最后再根据不同的 class 设置不同伪元素的内容。

    2.5K100

    Parallels Toolbox for mac(pd工具箱)

    激活将禁用允许计算机进入睡眠状态的所有设置。要禁用此模式并恢复所有睡眠设置，只需再次运行该工具即可。 下载音频 使用此工具从互联网下载音频文件。您可以一次下载一个音频文件，也可以一次下载整个播放列表。...您还可以从视频文件下载音频。默认情况下，音频文件将保存到“下载”文件夹（您可以在工具的设置中指定其他文件夹）。 上传视频 使用此工具从互联网下载视频。...只需将网站URL从视频从浏览器拖放到图标或工具窗口，视频就会开始下载。支持许多流行的视频共享网站。...您还可以复制 URL（选择它并按 Command+C），切换到上传视频工具，然后将其粘贴 （Command+V）。视频文件保存在 Mac 上的“下载”文件夹中。...生成的 GIF 文件保存在与视频相同的位置。 颜色测量 在任何当前正在运行的应用程序中测量颜色，并以可自定义的格式（十六进制、RGB、HSL 或 CMYK）获得结果。

    5.8K30

    自定义字体

    如小米笔记本 Air： 这里我们可以看到其使用了'F5130a'字体，但是这个酷炫的高端字体我们的电脑里面都没有，它其实就是该站点自定义设置的字体。 那么如何实现自定义字体的效果呢？...ttf 浏览器兼容性 .woff 浏览器兼容性 .eot 浏览器兼容性 .svg 浏览器兼容性 如何兼容 通过上面我们可以了解到若在使用 @font-face 规则时仅仅考虑一种字体格式，则可能导致在某些浏览器中无法生效...Browsers */ } 自定义图标字体（iconfont） 自定义字体平时其实使用还是非常少的，不过它还有一个应用非常广的领域——自定义图标字体（iconfont）。...首先我们先去Fontello这个图标字体库去选中几个图标： 然后下载下来，解压如下： 通过浏览器打开我们的 demo.html 文件就可以看到我们下载到的字体图标效果。..., [class*=" icon-"]:before 使用该自定义字体，最后再根据不同的 class 设置不同伪元素的内容。

    1.6K30
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券