首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在flutter中使用图标的轮廓边框?

在Flutter中使用图标的轮廓边框,您可以使用OutlinedButtonIconButton组件来实现。

  1. 使用OutlinedButton组件:

OutlinedButton是一个带有轮廓边框的按钮,您可以将图标放置在按钮内部。以下是实现的步骤:

步骤一:在Flutter项目中添加flutter_icons依赖,该依赖包含了一系列的矢量图标。

代码语言:txt
复制
dependencies:
  flutter_icons: ^1.1.0

步骤二:运行flutter pub get命令以获取依赖包。

步骤三:导入所需的库。

代码语言:txt
复制
import 'package:flutter_icons/flutter_icons.dart';

步骤四:在OutlinedButton组件中使用图标和边框样式。

代码语言:txt
复制
OutlinedButton(
  onPressed: () {
    // 点击按钮触发的操作
  },
  style: OutlinedButton.styleFrom(
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(10.0),
    ),
    side: BorderSide(width: 1.0, color: Colors.black),
  ),
  child: Icon(Icons.home),
),

在上面的代码中,我们创建了一个带有圆角边框和1像素宽度的黑色边框的按钮。图标使用Icons.home表示首页图标,您可以根据需求更改图标。

  1. 使用IconButton组件:

IconButton是一个带有图标的按钮,您可以自定义边框样式。以下是实现的步骤:

步骤一:导入所需的库。

代码语言:txt
复制
import 'package:flutter/material.dart';

步骤二:在IconButton组件中使用图标和边框样式。

代码语言:txt
复制
IconButton(
  onPressed: () {
    // 点击按钮触发的操作
  },
  icon: Icon(Icons.home),
  iconSize: 30.0,
  padding: EdgeInsets.all(15.0),
  alignment: Alignment.center,
  splashRadius: 20.0,
  color: Colors.transparent,
  highlightColor: Colors.grey,
  splashColor: Colors.grey,
  tooltip: 'Home',
  onPressed: () {
    // 点击按钮触发的操作
  },
  focusColor: Colors.red,
  hoverColor: Colors.blue,
  visualDensity: VisualDensity.adaptivePlatformDensity,
  constraints: BoxConstraints.tightFor(
    width: 56.0,
    height: 56.0,
  ),
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(10.0),
    side: BorderSide(width: 1.0, color: Colors.black),
  ),
),

在上面的代码中,我们创建了一个带有圆角边框和1像素宽度的黑色边框的按钮。图标使用Icons.home表示首页图标,您可以根据需求更改图标。

这是在Flutter中使用图标的轮廓边框的两种方法。根据您的需求,您可以选择适合您的方法并根据实际情况进行自定义。如果需要更多关于Flutter图标和按钮的信息,您可以参考以下腾讯云相关产品:

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

【opencv实践】你确定真的了解寻找轮廓函数吗?【RM大符识别】

6@offset:每个轮廓点的可选偏移量,有默认值Point(),对ROI图像找出的轮廓,并要在整个图像中进行分析时,这个参数便可排上用场。...同理,我们可以认为边框2的父轮廓边框1,则contours[2]的hiearchy[2][3] = 1。...同样,边框6,7的父轮廓边框5,只不过当我们返回边框5的内嵌轮廓(子轮廓)时,只能返回6,7其中之一。 编程思路 到此理解了findContours()函数,我们再回顾一下我们要处理的图像: ?...上图中,蓝色框是我们检测出来的父轮廓轮廓1里面有一个黑洞,也就是包含一个内嵌轮廓,而2没有内嵌轮廓,3有三个内嵌轮廓。 而我们要检测的就是轮廓1的内嵌轮廓。...但opencv没有直接数父轮廓里所包含内嵌轮廓个数的函数。怎么办呢? 我们就检测子轮廓(内嵌轮廓),检测到一个子轮廓,就将其父轮廓对应的数组元素加1。

2.8K20

Flutter构建布局 顶

第1步:绘制布局 第一步是将布局打破成其基本要素: 识别行和列。 布局是否包含网格? 有重叠的元素吗? 用户界面是否需要选项卡? 注意需要对齐,填充或边框的区域。 首先,确定更大的元素。...将文本放入容器,以便沿每条边添加32像素的填充。 softwrap属性指示文本是否应在软换行符(句点或逗号)上断开。...有关更多信息,请参阅可视化调试,这是调试Flutter应用程序的一部分 以下是此UI的部件树: ? 大部分应该看起来像你所期望的,但你可能想知道容器(以粉红色显示)。...如果要添加填充,边距,边框或背景色,请使用容器来命名其某些功能。 在这个例子,每个文本小部件放置在容器以添加边距。 整个行也被放置在容器以在行的周围添加填充。 本例的其余UI由属性控制。...如果您愿意,可以构建仅使用小部件库的标准小部件的应用程序。 如何在Flutter布置单个小部件? 本节介绍如何创建一个简单的小部件并将其显示在屏幕上。

43.1K10

Flutter 旋转轮

在在本文中,我们将探讨 “Flutter 的旋转轮”。我们还将在flutter应用程序中使用flutter_spinwheel」包来实现带有自定义选项的「Spinwheel」演示程序。...pub 地址:https://pub.dev/packages/flutter_spinwheel 效果演示: 该演示视频展示了如何在Flutter使用自旋轮。...它显示了如何在flutter应用程序中使用flutter_spinwheel」软件包运行「旋转轮」,并显示了当您点击该项目时,旋转器将移动。同样,您将沿顺时针/逆时针的任何方向移动微调器。...应该在构造函数处理它。 **shouldDrawBorder:**此属性用于确定是否应绘制边框。 **hideOthers:**此属性用于确定是否应绘制快门以隐藏除选定以外的所有选项。...使用 添加依赖 flutter_spinwheel: ^0.1.0 引入 import 'package:flutter_spinwheel/flutter_spinwheel.dart'; 运行命令

8.8K20

Flutter』布局组件 Container、Row、Column、Stack

Container Flutter的Container组件是一个非常通用且多功能的布局构件。它可以用来创建矩形的视觉元素,可以装饰以盒子装饰(例如背景色或边框),也可以配置边距、填充和尺寸约束。...Container可以包含一个单独的子元素,但不是专门用来做子元素布局的,对于布局,Flutter提供了其他组件Row、Column或Stack。...alignment: 控制子Widget如何在容器内对齐。...3.1.基本使用 示例代码: import 'package:flutter/material.dart'; void main() { runApp(MaterialApp( //...3.2.实现定位 在Flutter使用Stack和Positioned组件可以实现类似CSS的绝对定位效果。Positioned组件可以指定子组件在Stack的确切位置。

60530

Flutter』常用组件 按钮、图片

1.前言 经过上一篇文章的学习,我们大家可以了解到布局相关的组件,但是在实际开发,我们还需要使用到其他的组件,比如按钮、图片、文本、输入框等等,这些组件都是我们在开发中经常使用的,所以本篇文章我们就来学习一下这些常用组件...2.常用组件 在Flutter,有多种按钮组件可以用于创建交互式界面。主要的按钮组件包括: ElevatedButton:这是一个凸起的按钮,常用于主要的操作。...OutlineButton(现在称为OutlinedButton):这个按钮有一个边框,但没有背景色。当按下时,边框和文字颜色会变化,适用于需要强调边框而非背景色的场景。...FloatingActionButton:这是一个圆形的按钮,通常悬浮在内容上方,用于促进应用的主要动作,添加、编辑等。...使用 Image 组件: import 'package:flutter/material.dart'; void main() { runApp(MaterialApp( // 应用程序的标题

39731

UI界面图标终极设计指南

根据图标形状,将它们放在相应的框架。你就会发现,方形图标比三角形或细长图标更紧凑。 ? ? 图标越紧凑,所需空间就越小。图标的边缘越锐利,细节越多,它们占据的画板空间就越多。 ? ?...如果一个图标的某些元素伸展出来更好看,那就顺其自然让它们伸出来。 2 注意像素网格的重要性 在非视网膜屏幕上设计图形的时候,要特别遵循使用像素网格,并优先选用2像素的边框作为图标的线条。...如果为图标设置1像素的边框,这个时候,这些边框应该使用外部或内部的描边样式,但不建议是居中的。如下图,你可以看到他们的区别。 ? ? 居中描边的一像素边框,虽然在放大它们的时候,它们看起来很清晰。...4 控制最小的间隙尺寸 图标的相邻元素之间空间在整个图标集中不应太小或不一致。在任何情况下,都要定义最小间隙,以避免轮廓“粘滞”。比如下方的图标,太小的间隙,所产生的粘滞感要特别注意: ?...6 保持图标风格统一 下面的两幅可以很好的展示正确的和错误的例子,比如一套家具的图标,如果一个图标的绘制角度是斜45°,那么其他的图标也尽量保持这样的角度。而不能一个是正视,一个是斜视。

1K50

超干!UI界面图标终极设计指南

根据图标形状,将它们放在相应的框架。你就会发现,方形图标比三角形或细长图标更紧凑。 图标越紧凑,所需空间就越小。图标的边缘越锐利,细节越多,它们占据的画板空间就越多。...如果一个图标的某些元素伸展出来更好看,那就顺其自然让它们伸出来。 2 注意像素网格的重要性 在非视网膜屏幕上设计图形的时候,要特别遵循使用像素网格,并优先选用2像素的边框作为图标的线条。...如果为图标设置1像素的边框,这个时候,这些边框应该使用外部或内部的描边样式,但不建议是居中的。如下图,你可以看到他们的区别。 居中描边的一像素边框,虽然在放大它们的时候,它们看起来很清晰。...4 控制最小的间隙尺寸 图标的相邻元素之间空间在整个图标集中不应太小或不一致。在任何情况下,都要定义最小间隙,以避免轮廓“粘滞”。...6 保持图标风格统一 下面的两幅可以很好的展示正确的和错误的例子,比如一套家具的图标,如果一个图标的绘制角度是斜45°,那么其他的图标也尽量保持这样的角度。而不能一个是正视,一个是斜视。

86920

Css代码

提示:建议使用多个,浏览器将使用其可识别的第一个值。使用逗号分割每个值,并始终提供一个通常字体系列作为最后的选择*/ color:①white;说明:①white /*字体颜色。...可用颜色代码#000或#668547或red等*/〓背景属性〓background:①url(背景地址) ②no-repeat ③scroll ④right ⑤bottom ⑥#002255;background-size...;说明:①2px /*轮廓宽度*/②black /*轮廓颜色*/③solid /*轮廓样式。...*/[属性*=值] {通用代码} /*匹配属性值包含指定值的每个元素。...*/ 完整代码复制时,注意带上该段开头部分与结尾部分(body{和}),发现不能使用可删除/*文字注释*/看看,建议结合上面的通用代码使用 网页主页定义 body { background-color

2K20

Flutter BottomNavigation 底部导航详解 及问题记录

Flutter BottomNavigation 底部导航详解 主要是使用了 Scaffold下的 bottomNavigationBar 整个属性,在这个属性下,可以添加底部图标的背景色,选中颜色,...提供了两套预设的主题UI 这些UI有很多的常量可以直接引入使用 颜色, 按钮,图标 Colors.white // 白色颜色 Icons.home // home 图标 FloatingActionButton...// 漂浮的按钮 效果 在colors.dart查看预设颜色值 在icons.dart查看预设图标 源码 三个文件 main.dart import 'package:flutter/material.dart...问题3: 目前dart辨析的时候,有很多括号, 格式不够优美,有没有第三方,成熟的组件以供使用 问题4: 如何在页面切换时 ,使用动画,自己写?框架有预设吗?...效果

3.2K10

如何绘制PCB外形加工

在印制板制造过程,国外定单的文件制作、技术要求、验收标准都较为正规,外形尺寸加工则更为完整,加工要求及外形公差必不可少,而目前国内PCB设计,绝大多数的PCB文件只提供PCB加工的轮廓线,对外形尺对没有做任何标注...绘制PCB外形加工的最好软件应当是AUTOCAD,AUTO-CAD在机加工设计方面有着强大的功能,设计方便快捷。如何在 AUTO-CAD软件中进行PCB加工外形的设计呢?...首先将PCB文件转换成 GERBER文件格式,将需要外形加工的各种轮廓线放在一层文件当中,在CAM350软件中将外形加工的轮廓线的这层 GERBER文件输出为.DXF文件格式,打开AUTO-CAD软件,...选用—→调入.DXF文件,选用一→设置标注尺寸的箭头大小、值的字体大小、单位、公差标注方式、标注线与边框线的距离等等,这对设计高品质的外形相当重要,接着选用一→对外形尺寸进行标注,标注时采用捕捉方式,...,在AUTO-CAD软件先调入标淮图框,选用插入方式调入外形加工轮廓线,外形尺寸标注完毕后,将它缩放到标注图框内,同时还可以加注任何形式的说明、技术要求。

1.3K50

文本、图片和按钮在Flutter怎么用

理解了单一样式文本Text的使用方法后,我们再来看看如何在一段字符串中支持多种混合展示样式。...面对这样的需求,在Android,我们使用 SpannableString来实现;在iOS,我们使用NSAttributedString来实现;而在Flutter中国也有类似的概念,即TextSpan...接下来,我们再来看看Flutter的图片控件Image。 图片 使用Image,可以让我们向用户展示一张图片。...图片的显示方式有很多,比如资源图片、网络图片、文件图片等,图片格式也各不相同,因此在Flutter,也有多种方式用来加载不同形式、支持不同格式的图片: 加载本地资源图片,: Image.asset...Image展示图片的流程,可以用如下流程来表示: ?

7.7K20

PPT如何打造了若指掌的可视化图表

平时办公用户经常在PPT插入图表,但是使用默认的图表可视化效果并不佳。其实可以结合PPT里的形状、图片和图表等元素,打造出可视化效果更佳的图表。下面就同iSlide一起来了解下吧!...01.png   一、形状渐变+填充——打造百分占比图表   为了更好地表示数据的占比,办公用户经常使用柱形或饼等进行表述。...在PPT准备上述QQ占比份额数据,点击"插入→图表→饼",按提示插入一个饼图表示上述的占比。接着点击图表,去除网格线、图标标题、图例等不需要的元素,将边框设置为"无线条"。...把上述准备好的结合形状叠加到上述图表上方,同时调整形状的大小,使得形状的圆形正好覆盖饼,接着选中形状切换到"绘图→形状填充",将其颜色填充为和幻灯片背景相同的绿色,同时设置其轮廓为无,这样形状就会覆盖上述的饼的外缘区域...比如裁剪图片组合方法,大家可以使用画图3D制作出三维图形(球体、立方体等),将其截图转化为图片后插入幻灯片中,然后通过上述方法对它进行填充,制作出具有三维效果的填充

2.1K40

新Sketch设计背后的故事:如何重设计Sketch的工具栏图标?

团队在设计工具栏图标的时候非常谨慎小心,以确保用户不会对这些最常用的内容感到不适应。 Big Sur的大更新 新图标的一个微妙但重要的变化是尺寸。...在 Catalina ,工具栏图标的标准尺寸是 19 x 19px。在Big Sur(现在是Monterey),它的尺寸是 24 x 24px。...“设计单色图标集的关键是确保为图标使用独特、清晰的形状,”他解释道。由于团队不能再依赖颜色,主要的识别因素必须是轮廓。“我们试图尽可能区分这些轮廓和形状。...我们知道你在想什么——团队只是使用了内边框,对吗?不!Janik 解释了原因。 “虽然在某些情况下使用内部边框会更容易,但当你需要一个带有开放路径的图标时,事情很快就会变得混乱或不一致,”他说。...“如果您仅对少数图标使用边框或内边框,则始终需要仔细检查,是否计算了适合您系统的正确角半径或“视觉”形状大小。我们采用居中对齐的边界来确保开放路径和封闭路径之间的一致性。”

1.3K20

Power BI 地图轮廓颜色变化

常规的SVG着色地图为形状填充,本文介绍轮廓填充的方法,效果如下图所示,地图充当卡片的背景,轮廓颜色随数据大小变化(本例大于50%绿色否则红色)。..../> Stroke控制边框的颜色,此外可能代码还有stroke-width等字样控制边框的粗细。如何实现填充色无色,边框显示颜色呢?...边框变色实操 ---- 首先将地图文件批量导入Power BI,导入SVG格式的数据同text数据(操作有问题,参考这个视频https://t.zsxq.com/07eqBm6yF),导入后数据如下图所示...SVG地图轮廓卡片 = VAR SVG = SUBSTITUTE( SUBSTITUTE( SUBSTITUTE( SELECTEDVALUE...IF(HASONEVALUE('地理表'[Name]),SVG,"请选择省份") 把以上度量值放入HTML Content第三方视觉对象,即实现下图效果: 这个技巧还可用在前期介绍的滚动地图效果

1.3K20

Flutter 专题】64 图解基本 TextField 文本输入框 (一)

decoration 为边框修饰,可以借此来调整 TextField 展示效果;可以设置前置图标,后置图片,边框属性,内容属性等,和尚会在后续集中尝试;若要完全删除装饰,将 decoration 设置为空即可...inputFormatters 为格式验证,例如原生 Android 通常会限制输入手机号或其他特殊字符,在 Flutter 也可以借此来进行格式限制,包括正则表达式;使用时需要引入 package...WhitelistingTextInputFormatter 仅允许输入白名单字符; digitsOnly 仅支持数字 [0-9]; c....BlacklistingTextInputFormatter 防止输入黑名单字符; singleLineFormatter 强制输入单行;分析源码 RegExp("[/\]") 可以设置正则表达式;...; dependencies: flutter: sdk: flutter flutter_localizations: sdk: flutter 在 MaterialApp 设置本地化代理和支持的语言类型

4.6K51

canvas绘制图像轮廓效果绘制边框绘制轮廓 使用算法(marching-squares-algorithm)总结参考文档

绘制边框 绘制边框是最容易实现的效果,比如下面的图片 image.png 要绘制边框,只需要使用strokeRect的方式即可。...考虑到在三维webgl,计算轮廓的算法思路是这样的: 先绘制三维模型自身,并在绘制的时候启动模板测试,把三维图像保存到模板缓冲。...而使用第二个方法,我们可以指定绘制的尺寸,我们可以使用第二个方法绘制放大的图片,代码所示: ctx.drawImage(img, p - s, p - s, w + 2 * s, h+ 2 * s)...最后的绘制效果如下: image.png 可以看到轮廓的颜色变浅了,解决办法就是多绘制几次放大。...而对于有中空,就会使用MarchingSquares算法,效果相对差,效率也相对低一些,实际应用,可以通过缓存来降低性能的损耗。

2.4K30

网页|在CSS学习的问题总结

2.2.1去掉“solid”之后的盒子 后来查阅发现solid其实是边框样式实线的意思。...2.2.2菜鸟实例 实例的“one”可以理解为这个边框的“身份”,当边框数量>1时可快速区分各边框。...(3)CSS outline遇到的问题: 问题一:(未解决)为什么给一个边框添加轮廓会使所有边框被框住?如图: ?...3.1.1outline 在所有边框的代码,仅此一处规定了outline,但所有边框都增加了一样的轮廓。(参考2.2.8)猜想:是否可以给每一个边框都定义不同的轮廓?...不需要轮廓边框是否需要隐藏轮廓才不会显示轮廓? (4)CSS margin遇到的问题: 问题一:(未解决)该在什么范围内设置外边距较为合理?

2.3K20
领券