Flutter:在SizedBox前添加图标。为什么行在AppBar之后消失了？

Flutter是一种跨平台的移动应用开发框架，它可以帮助开发者使用单一代码库构建高性能、美观的移动应用。在Flutter中，可以使用SizedBox来指定一个固定大小的容器，并且可以在其中添加其他的组件。如果在SizedBox前添加了一个图标，但是在AppBar之后图标消失了，可能是由于布局层级的问题导致的。

在Flutter中，布局是通过Widget树来实现的，每个Widget都有自己的布局规则。AppBar是一个常用的顶部导航栏组件，它通常位于Scaffold的appBar属性中。如果将SizedBox放在AppBar之后，那么SizedBox就会被AppBar覆盖，导致图标无法显示。

为了解决这个问题，可以将SizedBox放在AppBar之前，这样SizedBox就会在AppBar之上进行布局，图标就能正常显示了。以下是一个示例代码：

AppBar(
  title: Text('My App'),
),
SizedBox(
  width: 100,
  height: 100,
  child: Icon(Icons.add),
),

在上述代码中，AppBar位于SizedBox之前，因此SizedBox中的图标可以正常显示。

关于Flutter的更多信息和学习资源，可以参考腾讯云的Flutter开发文档和相关产品：

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

有帮助

没帮助

相关·内容

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

2.3K0 0

构建实用的Flutter文件列表：从简到繁的完美演进

前言：为什么我们需要文件列表？在现代科技发展迅速的时代，我们的电脑、手机、平板等设备里积累了大量的文件，这些文件可能是我们的照片、文档、音频、视频等等。...添加网格视图按钮首先，我们需要在文件列表页面上添加一个按钮，让用户可以选择查看文件列表的不同布局方式。在我们的示例中，我们将在AppBar中添加一个按钮来切换布局方式。...在每个文件的Card中，我们放置了一个文件图标和文件名，并通过InkWell来处理文件的点击事件。通过以上步骤，我们已经成功实现了网格布局的文件列表。...添加HTTP依赖首先，我们需要在我们的Flutter项目中添加HTTP库的依赖。...在pubspec.yaml文件中添加http库的依赖： dependencies: flutter: sdk: flutter http: ^1.2.0 然后运行flutter pub

2381 2

Flutter开发实战分析-pesto_demo解析

.'))); }), Appbar（暂时）代码先添加一个暂时的AppBar，滑动动画的部分，我们会后面处理 class _RecipeGridPageState extends...在Flutter中，要实现padding,只要在它包裹在外面一层布局下就可以了。...为什么不用column?...正在的技术我们这里的效果是根据appBar的大小，进行图标的缩放，最后保留图标，停留在那。我们可以使用LayoutBuilder这个类，来传递变化的父组件的约束。...33.gif 看到这时候，之前FlexibleSpaceBar自带的渐变效果就消失了，还可以可以看到这个constraints的高度在变化 ?

2.3K2 0

Flutter 中 Padding、Row 、Column 、Expanded 组件详解

Paddiing 组件在 html 中常见的布局标签都可以使用 padding 属性，但是 Flutter 中很多 Widget 是没有 padding 属性，这个时候我们可以用 Padding 组件处理容器与子元素直接的间距...:AppBar(title:Text('Flutter App')), // 主体 body:HomeContent(),...@override Widget build(BuildContext context) { return Padding( // 给整个容器右边添加内边距...:AppBar(title:Text('Flutter App')), // 主体 body:HomeContent(),...:AppBar(title:Text('Flutter App')), // 主体 body:HomeContent(),

1.7K1 0

Flutter 你需要知道的那些事 01

但是在 Flutter 里面却不是这样，因为 Flutter 要具体的数值。所以我们可以这样考虑，假设我这个值非常大，比所有市面上的设备宽度还要大，那么是不是表现出来就是充满父控件了。...可以看到，设置宽度之后，Image 确实是填充了宽度，只不过由于图片本身没有那么宽，因此看起来就以为是没有起作用。那么如何让图片可以填充宽度呢？这个就涉及到图片的填充模式了。...可以看到已经满足我们的需求了。...温馨提示：测试完之后不要忘记去掉测试的 Container 以及对应颜色哦~ print 我们知道在 Android 里面，当我们 try catch 之后，我们打印异常基本会写出类似下面代码： Log.e...(TAG, "exception="+e); 在 Flutter 也有异常捕获。

6263 0

Flutter中Padding、Row 、Column 、Expanded 组件详解

1.3K2 0

【Flutter】Flutter 布局组件 ( Opacity 组件 | ClipRRect 组件 | Padding 组件 )

= null), super(key: key, child: child); } Opacity 组件用法 : 设置透明度 : 在 opacity 字段设置透明度值 , 取值范围 0 ~...ThemeData( primarySwatch: Colors.blue, ), home: Scaffold( // 顶部标题栏 appBar...onTap: (index){ // 回调 StatefulWidget 组件的 setState 设置状态的方法 , 修改当前选中索引 // 之后...: 三目运算符 ), ); } /// RefreshIndicator 发生下拉操作时, 回调该方法 /// 该方啊是一个异步方法 , 在方法体前添加 async 关键字.../flutter Flutter 中文社区 : https://flutter.cn/ Flutter 实用教程 : https://flutter.cn/docs/cookbook Flutter CodeLab

1.9K0 0

flutter中的响应式布局

总不能只适配手机尺寸，在PC端就可能看起来很丑了，这样用户体验就非常的差了，如下图：大屏幕上显示手机版布局很显然，这不是我们希望看到的结果，这时候就轮到我们的响应式布局...and Expanded widgets ) Widget tree (手机版) (省略了SizedBox and Expanded widgets ) Riverpod实现页面切换目前我们的app...手机端的Drawer Navigation 现在我们看看手机端，会发现缺少了Icon flutter不是应该自动添加图标的吗？...我们看看我们的widget tree 在 SplitView 中添加了Scaffold但是没有 AppBar ....虽然在FirstPage有 Scaffold 和 AppBar 但是没有 Drawer. 先有鸡还是先有蛋呢？

2.8K1 0

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

= null), super(key: key, child: child); } PhysicalModel 组件用法 : 设置裁剪形状 : 默认矩形 , 可以在 shape 字段设置圆形...ThemeData( primarySwatch: Colors.blue, ), home: Scaffold( // 顶部标题栏 appBar...onTap: (index){ // 回调 StatefulWidget 组件的 setState 设置状态的方法 , 修改当前选中索引 // 之后...: 三目运算符 ), ); } /// RefreshIndicator 发生下拉操作时, 回调该方法 /// 该方啊是一个异步方法 , 在方法体前添加 async 关键字.../flutter Flutter 中文社区 : https://flutter.cn/ Flutter 实用教程 : https://flutter.cn/docs/cookbook Flutter CodeLab

1.3K0 1

Flutter开发-容器类组件

Padding（填充） Padding可以给其子节点添加填充（留白），和边距效果类似。我们在前面很多示例中都已经使用过它了，现在来看看它的定义： Padding({ ......尺寸限制类容器尺寸限制类容器用于限制容器大小，Flutter中提供了多种这样的容器，如 ConstrainedBox SizedBox UnconstrainedBox AspectRatio 本节将介绍一些常用的...position ：此属性决定在哪里绘制Decoration，它接收DecorationPosition的枚举类型，该枚举类有两个值： background：在子组件之后绘制，即背景装饰。...幸运的是，Flutter Material组件库提供了一些现成的组件来减少我们的开发任务。Scaffold是一个路由页的骨架，我们使用它可以很容易地拼装出一个完整的页面。...如果我们想自定义菜单图标，可以手动来设置leading，如： Scaffold( appBar: AppBar( title: Text("App Name"), leading:

3.6K2 0

【Flutter】362- 让前端开发者失业的技术，Flutter Web 初体验

自从 FLutter 1.5.4 版本之后，支持了 Web 端的开发。...了解了 FLutter 之后，我来说一下今天的重头戏，Flutter for Web。要想知道 Flutter 为什么能在 web 上运行，得先来看看它的架构。 ?...安装完成之后，在 AVD (Android Virtual Device Manager) 中，点击工具栏的 Run。模拟器启动并显示所选操作系统版本或设备的启动画面。代表了正确安装。 ?...记住，之后往环境变量的 path 中添加；C:srcflutterbin，以便于你能在命令行中使用 flutter。...Home 类中，是我们要渲染的页面顶导，运用了 AppBar 组件，它包括了一个居中的页面标题和居右的搜索按钮。

2.2K2 0

Flutter 可折叠边栏

它是一个向左滑动的菜单，在大多数情况下，它包含应用程序中的重要连接，并且在显示时拥有一半的屏幕。该演示视频展示了如何在Flutter中创建可折叠的侧边栏。...它显示了在flutter应用程序中使用foldable_sidebar包可折叠的侧边栏将如何工作。它显示了当用户点击浮动操作按钮时，抽屉将以折叠方式显示/隐藏。它会显示在您的设备上。...在此小部件中，我们将添加中心小部件。在内部，我们将添加一个列小部件。在列小部件中，我们将添加两个文本，并且mainAxisAlignment为中心。...在内部，我们将添加按钮的backgroundColor。我们将添加一个菜单图标和onPressed（）方法。在此方法中，我们将定义setState（）。...在此小部件中，我们将添加一个列小部件。在内部，我们将添加图像，文本和ListTile。我们将添加三个带有图标和文本的ListTile。

6.4K5 0

第130期：flutter的状态组件和状态管理

比如我们有个图标，我们想让它支持点击事件，或者在状态改变的时候换一个不同的图标。其实我们可以创建一个有状态的组件来控制或管理那些需要变化的组件。...在flutter中无状态组件有很多，比如：Icon, IconButton, and Text。他们继承StatelessWidget类。...Demo', home: Scaffold( appBar: AppBar( title: const Text('Flutter Demo'),...实现了_handleTapboxChanged（）方法，即在轻敲框时调用的方法。调用setState（）以在轻敲发生且_active状态更改时更新UI。...onTapDown时，它会添加高亮显示（实现为深绿色边框）。onTapUp时，它会删除高亮显示。

1.5K2 1

Flutter 布局常用的 widgets（Common layout widgets）

ListTile 一个Row中装载最多3行文字；可选则在前面或尾部添加图标。 Container Container用法比较自由。...GridView提供了2个预装配好的列表，也可以自己建立自定义列表。 GridView支持滚动。...Stack 使用Stack在widget之上显示另一些widget，通常用来显示图片。...可以用SizedBox来指定card的尺寸。 Flutter中的Card有圆角和阴影效果。修改elevation可改变阴影效果。...elevation取值范围，参考 Elevation and Shadows 若设置的范围外的值，阴影效果会消失。

1.3K3 0

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

ThemeData( primarySwatch: Colors.blue, ), home: Scaffold( // 顶部标题栏 appBar...onTap: (index){ // 回调 StatefulWidget 组件的 setState 设置状态的方法 , 修改当前选中索引 // 之后...: 三目运算符 ), ); } /// RefreshIndicator 发生下拉操作时, 回调该方法 /// 该方啊是一个异步方法 , 在方法体前添加 async 关键字...refreshIndicatorOnRefresh() async{ // 暂停 500 ms , 使用 await 关键字实现 // 在这 500 ms 之间 , 列表处于刷新状态 // 500 ms 之后.../flutter Flutter 中文社区 : https://flutter.cn/ Flutter 实用教程 : https://flutter.cn/docs/cookbook Flutter CodeLab

9.2K0 0

Flutter | 容器组件

中提供了很多这样的属性，如 ConstrainedBox，SizedBox，UnconstrainedBox，AspectRatio 等。...在实际开发中，当我们发现已经使用了 SizedBox 或者 ConstrainedBox 给定子元素宽高，但是仍然没有效果时，几乎可以断定：已经有父元素设置了限制！...例如：Material 组件中的 AppBar 的右侧菜单中，我们使用 SizedBox 指定 loading 按钮的大小，代码如下： AppBar( title: Text("Box"), actions...position：此属性决定在哪里绘制 Decoration，它接受 DecorationPostition 的枚举类型，该枚举有两个类型： background：在子组件之后绘制 foreground...BottomAppBar 的 shape 属性决定洞的外形，CircularNotchedRectangle 实现了一个圆形的外形，我们也可以进行自定义；剪裁 Flutter 中提供了一些剪裁函数，

5.5K1 0

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

2.8K0 0

Flutter跨平台移动端开发

: AppBar( title: Text("SizedBox Widget"), ), body: SizedBox(...: AppBar( title: Text("UnconstrainedBox Widget"), ), body: SizedBox(...虽然从效果来看，父 widget 的限制没有起作用，但是实际上它只是没有影响子 widget 的大小，但还是占有了响应的空间 ---- DecoratedBox（装饰盒） decoratedBox 可以给子...widget 绘制前、后增添一个装饰 const DecoratedBox({ Key key, @required this.decoration, this.position...background = 在子 widget 之后绘制，foreground = 在子 widget 之前绘制 child：子 widget /** * @des DecoratedBox Widget

2.8K4 0

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

你是否需要了解 Flutter 布局的案例？这里我将展示我在使用 Flutter 布局的代码片段。我将通过精美的代码片段结合可视化的图形来举例。...decoration 总是在 child 属性的后面，而 foregroundDecoration 总是在 child 属性的后面。...首先，让我们将 BoxDecoration 设置为 foregroundDecoration，它被绘制在 Container 子部件之上（而 decoration 会绘制在子部件之后）。..., color: Colors.yellowAccent, ), ), SizedBox as padding 当需要添加内边距和外边距的时候，你可以选择 Padding 或 Container...但是，它们可以比添加 Sizedbox 更冗长且可读性更低。

2.9K4 0

Flutter 流体滑块

原文链接：https://medium.com/flutterdevs/explore-fluid-slider-in-flutter-ba6bf2dfa21 在本文中，我们将**探讨Flutter中的...它显示了如何在flutter应用程序中使用flutter_fluid_slider软件包来工作流体滑块传送带。它显示了具有不同颜色的三流体滑块，并为用户使用了不同的工作属性。它会显示在您的设备上。...**在setState中，我们将添加一个等于新值的变量。...我们将显示“money-off”图标。如果未提供，则该min值显示为文本。...: AppBar( title: Text("Flutter Fluid Slider Demo"), automaticallyImplyLeading: false,

11.7K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云