开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何在具有圆形边界的Container中居中显示图标小部件

在具有圆形边界的Container中居中显示图标小部件，可以通过以下步骤实现：

创建一个圆形边界的Container，可以使用Flutter中的Container组件，并设置其宽度和高度相等，以实现圆形效果。例如：

Container(
  width: 100,
  height: 100,
  decoration: BoxDecoration(
    shape: BoxShape.circle,
    color: Colors.blue,
  ),
  child: // 添加图标小部件
)

在Container中添加图标小部件，可以使用Flutter中的Icon组件或Image组件来显示图标。例如，使用Icon组件显示一个居中的箭头图标：

Container(
  width: 100,
  height: 100,
  decoration: BoxDecoration(
    shape: BoxShape.circle,
    color: Colors.blue,
  ),
  child: Icon(
    Icons.arrow_forward,
    size: 50,
    color: Colors.white,
  ),
)

为了实现图标小部件在Container中居中显示，可以使用Flutter中的Align组件或Center组件。例如，使用Align组件将图标小部件居中显示：

Container(
  width: 100,
  height: 100,
  decoration: BoxDecoration(
    shape: BoxShape.circle,
    color: Colors.blue,
  ),
  child: Align(
    alignment: Alignment.center,
    child: Icon(
      Icons.arrow_forward,
      size: 50,
      color: Colors.white,
    ),
  ),
)

以上是在具有圆形边界的Container中居中显示图标小部件的基本步骤。根据具体的应用场景和需求，可以进一步调整样式和布局。腾讯云提供了丰富的云计算产品和服务，可以根据具体需求选择适合的产品进行开发和部署。具体推荐的腾讯云相关产品和产品介绍链接地址可以参考腾讯云官方网站。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

【Flutter】Hero 动画 ( Hero 实现径向动画 | Hero 组件 createRectTween 设置 )

required this.tag : 不能为空 , 用于关联两个界面的 Hero 组件 , 两个 Hero 组件有关联关系 , 则设置相同的 tag 字符串 ;

04

【Flutter】Flutter 布局组件 ( PhysicalModel 组件 )

代码示例 : PhysicalModel 组件裁剪 PageView 组件 , 将 PageView 组件裁剪成圆角矩形样式 ;

00

[flutter专题]6详解AppBar小部件

应用栏是各种应用程序中最常用的组件之一。它可用于容纳搜索字段、以及在页面之间导航的按钮，或者只是页面标题。由于它是一个如此常用的组件，因此 Flutter 为该功能提供了一个名为AppBar的专用小部件。

01

Flutter中构建布局顶

然后本指南回过头来解释Flutter的布局方法，并说明如何在屏幕上放置一个小部件。在讨论如何水平和垂直放置小部件之后，会介绍一些最常见的布局小部件。

01

【Flutter】Flutter 布局组件 ( Wrap 组件 | Expanded 组件 )

Wrap 组件 : 该组件是可换行的水平线性布局组件 , 与 Row 组件间类似 , 但是可以换行 ;

00

Flutter 中自定义动画底部导航栏

在这个博客中，我们将探索Flutter中的自定义动画底部导航栏。我们将看到如何实现自定义动画底部导航栏的演示程序以及如何在您的 Flutter 应用程序中使用它。

03

Flutter 状态管理之GetX库

Flutter使用的是声明式UI，是通过状态去更新UI组件的，因此我们首先就要学习状态的使用。同样为了简化原本的状态使用，我们会使用Getx库。

00

【Flutter】Flutter 布局组件 ( FractionallySizedBox 组件 | Stack 布局组件 | Positioned 组件 )

FractionallySizedBox 组件 : 可控制组件在水平/垂直方向上填充满父容器 ;

00

【Flutter】StatefulWidget 组件 ( PageView 组件 )

PageView 组件构造函数 : 构造函数中的可选参数就是 PageView 组件的所有可设置选项 ;

00

10 个派上用场的 Flutter 小部件

尝试学习一门新语言可能会令人恐惧和厌烦。很多时候，我们希望我们知道早先存在的某些功能。在今天的文章中，我将告诉你我希望早点知道的最方便的几个Flutter小部件。

02

【Flutter 专题】127 图解基础 Image 小组件

Image 图片作为日常中最常用的 Widget 却也是最容易忽略的，和尚在日常中通常仅用到 Image 展示图片属性，但是 Image 本身非常强大，有很多和尚所不熟知的属性特征；今天和尚重新认识一下 Image Widget；

02

如何在 wxPython 中创建多个工具栏

作为C++库wxWidgets的包装器，wxPython允许Python开发人员利用这个成熟且经过实战测试的框架的强大功能。它具有各种平台的本机外观和感觉，包括Windows，macOS和Linux。使用 wxPython，您可以使用各种小部件（例如按钮、文本控件，当然还有工具栏）设计具有视觉吸引力且响应迅速的桌面应用程序。

02

Flutter 可折叠边栏

移动应用程序具有多种方法来处理屏幕之间的导航，例如导航抽屉，底部导航栏，滑动选项卡等。

05

Android开发笔记（一百七十一）使用Glide加载网络图片

如何方便而又快速地显示网络图片，一直是安卓网络编程的热门课题，前些年图片缓存框架Picasso、Fresco等等大行其道，以至于谷歌按捺不住也开发了自己的Glide开源库。由于Android本身就是谷歌开发的，Glide与Android系出同门，因此Glide成为事实上的官方推荐图片缓存框架。不过Glide并未集成到Android的SDK当中，开发者需要另外给App工程导入Glide库，也就是修改模块的build.gradle，在dependencies节点内部添加如下一行依赖库配置：

02

Flutter 布局备忘录 -- 多图警告，干货建议收藏

这里我将展示我在使用 Flutter 布局的代码片段。我将通过精美的代码片段结合可视化的图形来举例。

04

flutter常见问题【5】：as中对flutter的一些快捷键操作

如果只是通过看代码，来看widget之间的嵌套情况，可能需要不断滚动代码，并且也很难理解代码的结构。这个时候，我们需要使用到Flutter Outline。

02

flutter制作具有自定义导航栏的渐进式 Web 应用程序

我们将整个页面分成几个部分，以便于制定，我建议您这样做以获得更好的编程，让我们更详细地查看这些部分， NavigationBar()、 DashBoard()、 CalendarSpace()，首先我们可以做导航栏部分

00

flutter制作具有自定义导航栏的渐进式 Web 应用程序

我们将整个页面分成几个部分，以便于制定，我建议您这样做以获得更好的编程，让我们更详细地查看这些部分， NavigationBar()、 DashBoard()、 CalendarSpace()，首先我们可以做导航栏部分

02

为Flutter应用程序添加交互性顶

你如何修改你的应用程序，使其对用户输入做出反应？在本教程中，您将为仅包含非交互式小部件的应用添加交互性。具体来说，您将通过创建一个管理两个无状态小部件的自定义状态小部件来修改图标以使其可以点击。

02

Flutter 旋转轮

在在本文中，我们将探讨 “Flutter 中的旋转轮”。我们还将在flutter应用程序中使用「flutter_spinwheel」包来实现带有自定义选项的「Spinwheel」演示程序。

02

Python 笔记：GUI编程(Tkinter)

Python 提供了多个图形开发界面的库，几个常用 Python GUI 库如下：

03

Flutter | 一个关于背景颜色引发的打脸惨案

这不正好撞枪口上了么，刚写完 PopupMenuButton 的文章，这个逼必须得装。

03

Flutte部件目录-Material Components 顶

底部导航栏可轻松浏览并在单次点击之间在顶层视图之间切换。 BottomNavigationBar小部件实现此组件。

04

Flutte部件目录-基本部件（二）顶

支持以下图像格式：JPEG，PNG，GIF，GIF动画，WebP，WebP动画，BMP和WBMP

02

在 Flutter 中创建可拖动的浮动操作按钮[Flutter专题15]

Flutter 允许您使用FloatingActionButton小部件添加浮动操作按钮。但是，它不允许您拖动按钮。如果你想让它可拖动怎么办。本教程有一个示例，说明您需要做什么才能创建浮动操作按钮，只要它位于父小部件内，就可以将其拖动到屏幕周围的任何位置。

01

如何使用 CSS 来控制 img 标签在父元素中自适应宽度或高度，并按比例显示

图片显示是网页设计中的重要组成部分，而图片的大小和位置也会对页面的整体美观度产生影响。在实际的网站开发过程中，我们会遇到需要将图片放入一个容器中，并让其按比例缩放以适应容器大小的需求。

00

Anroid Wear OS 手表应用开发 - UI

智能手表相对手机来说，由于使用场景不同，且屏幕较小，所以应用的设计、交互和手机是有些区别的。相对来说，布局会更简洁，更多地使用滑动手势进行操作。

03

【Flutter 专题】106 图解 AnimatedWidget & AnimatedBuilder 动画应用

和尚继续上一节中自定义的 ACEPageMenu 滑动菜单，详细介绍一下涉及到的 AnimatedBuilder 动画，在此之前需要先了解 AnimatedWidget；

00

如何在flutter中构建响应式布局（第五节）

Flutter 是一个跨平台的应用程序开发框架，支持屏幕尺寸变化很大的设备：它可以在小到智能手表的设备上运行，也可以运行在大电视等设备上。使用相同的代码库使您的应用程序适应如此多样的屏幕尺寸和像素密度始终是一个挑战。在 Flutter 中设计响应式布局没有硬性规定。在本文中，我将向您展示一些在设计此类布局时可以遵循的方法。在继续在 Flutter 中构建响应式布局之前，我想说明一下

01

Flutter开发中的一些Tips

学习Flutter也有一阵子了。闲着没事，用了公司一个已经凉凉的App设计图来练手。当然了接口不可能用的了，所以都是些死数据，实现效果可以说是很完美了（得到了设计的认可。。。）。当然自己也是边查边写，也借鉴了许多Github上优秀的Flutter项目。现在开源出来（附带设计图），供大家交流学习。希望多多Star、Fork支持，有问题可以Issue。附上链接：github.com/simplezhli/…

03

Flutter 入门指北之常用布局

为了让我们的界面更容易被扩展，通常会在最外层包裹一层 Container，其构造函数也不是很难理解

02

利用PHP实现404页自动更换图片附api

只拿来做404页背景图或许有点太单调了，实际上也可以用来写广告位banner随机图片，单个图标ico随机（效果会太花里胡哨）。甚至文章缩略图也能指定图片随机显示。等等等等...只要是能插图片的地方，都可以用随机图片API。

01

Flutte部件目录-基本部件（三）顶

要显示snackbar或持久底部表，请通过Scaffold.of获取当前BuildContext的ScaffoldState，然后使用ScaffoldState.showSnackBar和ScaffoldState.showBottomSheet函数。

01

【Flutter】评级对话框组件

F「lutter」是一个免费和开源的项目，由Google创建并维护，是我们喜欢Flutter的原因之一。Flutter提供了漂亮的预构建组件，这些组件在flutter中被称为Widget。扑朔迷离的一切都是小部件！

05

【Flutter】Flutter 布局组件 ( 布局组件简介 | Row 组件 | Column 组件 | SizedBox 组件 | ClipOval 组件 )

Row 组件相关参数 : Row 组件相当于线性布局 , 水平方向布局 , 组件从左到右 ;

00

【Android布局】在程序中设置android gravity 和 android layout Gravity属性

在进行UI布局的时候，可能经常会用到 android:gravity 和 android:layout_Gravity 这两个属性。

01

Flutter 中 stateless 和 stateful widget 的区别[Flutter专题9]

Flutter 中 stateless 和 stateful widget 的区别

01

Flutter UI原理

Widgets是Flutter App用户交互的基础构成，每个widget代表的是用户交互的一部分(不可变的)，不像其他frameworks会分开views，viewControllers，layout或者其他属性，Flutter有一个统一的对象模型：widget。

02

计算机科学里最大的难题：居中显示

（不要问为什么你需要记住四个单词而不是 horizontal 和 vertical 两个单词，这已经比以前好了）

01

Flutter 视图布局-前言

在学习 Flutter 的过程中也看到一些江湖侠客们对于 Flutter 的议论。他们大多觉得 Flutter 不够友好、括号太多了，导致看起来代码非常复杂，对此呲之以鼻并以唱衰之。

[Flutter] 滑动卡组件

在在本博客中，我们将探讨「Flutter中」的**滑动卡。**我们还将实现一个演示程序，并学习在flutter应用程序中使用「slide_card」包创建具有滑动动画效果的滑动卡。

06

计算机科学里最大的难题：居中显示

（不要问为什么你需要记住四个单词而不是 horizontal 和 vertical 两个单词，这已经比以前好了）

01

Flutter完整开发实战详解(一、Dart语言和Flutter基础)

在如今的 Fultter 大潮下，本系列是让你看完会安心的文章。本系列将完整讲述：如何快速从0开发一个完整的 Flutter APP，配套高完成度 Flutter 开源项目 GSYGithubAppFlutter。同时也会提供一些Flutter的开发细节技巧，并针对开发过程中可能遇到的问题进行填坑。

03

Flutter完整开发实战详解(一、Dart语言和Flutter基础)

在如今的 Fultter 大潮下，本系列是让你看完会安心的文章。本系列将完整讲述：如何快速从0开发一个完整的 Flutter APP，配套高完成度 Flutter 开源项目 GSYGithubAppFlutter。同时也会提供一些Flutter的开发细节技巧，并针对开发过程中可能遇到的问题进行填坑。

03

Div+CSS – 简单布局

1、顶部部分，其中又包括了LOGO、MENU和一幅Banner图片； 2、内容部分又可分为侧边栏、主体内容； 3、底部，包括一些版权信息。

01

Flutter创建圆圈图标按钮

我找不到任何显示如何创建IconButton类似于的圆的示例FloatingActionButton。任何人都可以建议创建一个自定义按钮的方式/需要什么FloatingActionButton吗？

03

CSS再学

css的注释 /*.......*/ 直接在html代码中写css

css代码写在当前文件中 <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> p{ color: red; font-size: 19px; } </style> </head>

07

《Monkey Android》第12课ImageView

这一节课，我们主要学习了ImageView，不过它的功能有限，只能显示静态图片。在实际需求中，我们可能会用到更高级的用法，如显示圆形头像，或者动态的gif，又或者图片的缩放与缩略图等等，这些就需要我们自己取实现ImageView了，后面都会讲到。

02

安卓开发微信页面设计

2.具有四个页面，页面具有底部选择框，同时具有选择事件，当点击选择事件的时候进行页面切换

04

CSS3文本居中显示、圆形圆角绘制、立体阴影效果设置实例演示

通过 div 层的 text-align: center; 先控制文本在横向中间，再根据 margin-top: 48%; 即可控制文本显示在图形的竖向中间部位，值可以根据文本的大小来定位，大约略小于百分之 50%。

03

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭