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

在与IconButton大小和填充相同的AppBar中显示CircularProgressIndicator

,可以通过在AppBar的leading或trailing位置添加一个Container来实现。

首先,AppBar是一个通常位于屏幕顶部的导航栏组件,它通常包含一个标题和一些操作按钮。IconButton是一个带有图标的按钮组件,用于触发特定的操作。

要在AppBar中显示CircularProgressIndicator,可以按照以下步骤进行操作:

  1. 在AppBar的leading或trailing位置添加一个Container组件。
  2. 在Container中使用Align组件来控制CircularProgressIndicator的位置。
  3. 在Align组件的child属性中添加CircularProgressIndicator组件。

下面是一个示例代码:

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('My App'),
          leading: Container(
            padding: EdgeInsets.all(8.0),
            child: Align(
              alignment: Alignment.center,
              child: CircularProgressIndicator(),
            ),
          ),
        ),
        body: Container(),
      ),
    );
  }
}

在上面的示例中,我们在AppBar的leading位置添加了一个Container组件,并设置了padding属性来控制CircularProgressIndicator的大小和填充。然后,使用Align组件将CircularProgressIndicator居中显示在Container中。

这样,当你运行这个示例应用时,你将在AppBar的leading位置看到一个与IconButton大小和填充相同的CircularProgressIndicator。

推荐的腾讯云相关产品:腾讯云移动推送(https://cloud.tencent.com/product/tpns)可以用于实现消息推送功能,适用于移动应用开发中的消息通知需求。

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

相关·内容

Flutter | 容器组件

bottom) :分别指定四个方向填充 all(double value):所有方向都使用相同数值填充 only({left, top, right ,bottom }):可以设置具体某个方向填充...那么有什么办法可以彻底去除限制吗,答案是否定!所以开发如果要对子组件进行限制,那么就一点要注意,因为一旦限制指定条件,子组件如果要进行相关自定义大小时将可能非常困难!...例如:Material 组件 AppBar 右侧菜单,我们使用 SizedBox 指定 loading 按钮大小,代码如下: AppBar( title: Text("Box"), actions...Transform 以提高性能 RotatedBox RotatedBox Transform.rotate 功能相似,但是有一点不同:RotatedBox 变化是 layout 阶段,会影响子组件位置大小...打开抽屉方法 ScaffoldState ,通过 Scaffold.of() 可以获取腹肌最近 Scaffold 组件 State 对象 ToolBar 下面, AppBar 通过 Bottom

5.5K10

Flutte部件目录-Material Components 顶

实现Material Design指南视觉,行为运动丰富小部件。 应用程序结构导航 按钮 输入选择 对话框,弹出框和面板 信息显示 布局 查看Flutter窗口小部件目录更多小部件。...应用程序结构导航 Scaffold Appbar 上面两个基本部件已经讲过。 BottomNavigationBar ? 底部导航栏可轻松浏览并在单次点击之间顶层视图之间切换。...所有项目均以白色呈现,并且导航栏背景色所选项目的BottomNavigationBarItem.backgroundColor相同。...TabBarView 显示当前选定选项卡相对应部件页面视图。 通常TabBar结合使用。 ?...FlatButton 平面按钮是材料组件部件上打印部分,通过填充颜色对触摸作出反应。 ? IconButton 图标按钮是一个打印材质小部件上图片,通过填充颜色(墨水)对触摸作出反应。 ?

9.4K40

《Flutter》-- 4.Flutter组件基础

FlutterWidget不仅可以表示UI元素,也可以布局元素、动画、装饰效果。 Widget不是最终显示设备屏幕上显示元素,而是一个描述显示元素配置数据。...Flutter真正代表屏幕显示元素类是Element。 大多数场景下,可以宽泛地认为Widget树就是指UI组件树或UI渲染树。...创建有状态组件,需要继承StatefulWidget,然后该组件创建状态对象,并重写build()。...; BoxFit.cover:默认填充规则,保证长宽比不变情况下缩放以适应当前显示空间,图片不会变形; BoxFit.fitWidth:从宽度上充满空间,高度会按比例缩放,图片不会变形,超出显示空间部分会被剪裁...; BoxFit.none:没有填充策略,按图片原始大小显示

12.4K30

『Flutter』常用组件 按钮、图片

1.前言 经过上一篇文章学习,我们大家可以了解到布局相关组件,但是实际开发,我们还需要使用到其他组件,比如按钮、图片、文本、输入框等等,这些组件都是我们开发中经常使用,所以本篇文章我们就来学习一下这些常用组件...2.常用组件 Flutter,有多种按钮组件可以用于创建交互式界面。主要按钮组件包括: ElevatedButton:这是一个凸起按钮,常用于主要操作。...当按下时,边框和文字颜色会变化,适用于需要强调边框而非背景色场景。 IconButton:这是一个图标按钮,常用于工具栏对话框。它可以包含图标而不是文本,适用于空间有限或需要图形化表示地方。...常见属性及其作用: icon (IconData): 必需属性,用于指定要显示图标。通常从 Icons 类中选择一个图标。 size (double): 图标的大小。默认大小是 24.0。...Flutter ,用于显示图片主要组件是 Image。

31831

Flutter 入门指北之基础部件

DEBUG 标示横幅 }) MaterialApp 继承自 StatefulWidget,它 MyApp 所继承类 StatelessWidget,就是日常开发,自定义部件通常继承抽象类了...= 1.0, this.bottomOpacity = 1.0, }) 展示 AppBar demo 之前,我们先学习几个基本组件 Text、Image、Icon、Button 分布用于展示文字...mainAxisAlignment: MainAxisAlignment.center, children: [ // 这种展示图片方式下一种会有相同效果...,这边再埋坑【坑3】 // size 为图标显示大小,color 为图标的颜色,这边通过 Theme 获取主题色调 Icon(Icons.android...如果该参数传入值为 null 那么这个按钮就不可点击状态,无点击效果,等会可以例子查看。还有就是 child 参数,这里就是传入你需要展示内容,比如 Text、Icon 等等。

1.3K30

Flutter开发-容器类组件

Padding(填充) Padding可以给其子节点添加填充(留白),边距效果类似。我们在前面很多示例中都已经使用过它了,现在来看看它定义: Padding({ ......all(double value) : 所有方向均使用相同数值填充。 only({left, top, right ,bottom }):可以设置具体某个方向填充(可以同时指定多个方向)。...symmetric({ vertical, horizontal }):用于设置对称方向填充,vertical指topbottom,horizontal指leftright。...对父组件限制“去除”并非是真正去除:上面例子虽然红色区域大小是90×20,但上方仍然有80空白空间。...Button,通常悬浮在页面的某一个位置作为某种常用动作快捷入口 SafeArea 使用 SafeArea 可以让 child widget 顶部底部腾出足够空间方便处理 iPhoneX 这类手机

3.5K20

Flutter Widget框架之旅 顶

Container也可以有边距,填充和约束应用于其大小。 另外,Container可以使用矩阵在三维空间中转换。...同样,AppBar小部件允许我们传递小部件以获取title小部件leadingactiions。这种模式整个框架重复出现,并且设计自己小部件时可能会考虑到这一点。...例如,ShoppingList窗口部件构建了足够ShoppingListItem实例来填充其可见区域: 如果没有键,当前构建中第一个条目将始终前一个构建中第一个条目同步,即使语义上,列表第一个条目刚刚滚动屏幕并且不再在视口中可见...通过将列表每个条目指定为“semantic”键,无限列表可以更有效,因为框架将同步条目匹配semantic键并因此具有相似(或相同可视外观。...此外,语义上同步条目意味着保留在有状态子部件状态将保持附加到相同语义条目而不是视口中相同数字位置上条目。 全局Key 主要文章:GlobalKey 您可以使用全局键来唯一标识子窗口部件。

6.7K20

Flutter容器类组件

1.填充(Paddinig) 1.1 Padding介绍 Padding组件Android、IOS端只是一个属性,但在FlutterPadding是一个独立Widget。...all(double value): 所有方向均使用相同数值填充。 only({left, top, right ,bottom }):可以设置具体某个方向填充(可以同时指定多个方向)。...symmetric({ vertical, horizontal }):用于设置对称方向填充,vertical指topbottom,horizontal指leftright。...,而并不是应用在布局(layout)阶段,所以无论对子组件应用何种变化,其占用空间大小和在屏幕上位置都是固定不变,因为这些是布局阶段就确定。...3.6 RotatedBox RotatedBoxTransform.rotate功能相似,它们都可以对子组件进行旋转变换,但是有一点不同:RotatedBox变换是layout阶段,会影响子组件位置大小

3.8K40

Flutter 按钮,看这篇文章就够了

之前文章文本、图片按钮Flutter怎么用,简单介绍过按钮组件,本篇文章来详细聊聊Flutter各种按钮组件各种应用场景。...Flutter,有很多按钮组件,常见有:FlatButton、RaisedButton、OutlineButton、IconButton、ButtonBar、FloatingActionButton...IconButton、ButtonBar、自定义按钮组件 IconButton这个组件一般是用在定义顶部导航栏上按钮: appBar: AppBar( centerTitle...都是 Scaffold 组件属性, appBar 属性同级。...3,如果我们想要修改悬浮按钮尺寸大小,可以在其外层包一个Container组件。 4,可以通过配置Container圆角内边距,来实现悬浮按钮外层白色不透明圆边效果。

9.3K31

初识顶部导航栏【flutter20个实例之一】

一、老套路,先看样式 右侧图是我实际开发业务界面,用作展示而已 ? ?...二、讲解(后附源码) 1.这里主要是用户AppBar组件 /** AppBar({ Key key, this.leading,//标题前面显示一个控件,首页通常显示应用...this.actions,//一个 Widget 列表,代表 Toolbar 中所显示菜单,对于常用菜单,通常使用 IconButton 来表示;对于不常用菜单通常使用 PopupMenuButton...来显示为三个点,点击后弹出二级菜单 this.flexibleSpace,//一个显示 AppBar 下方控件,高度 AppBar 高度一样,可以实现一些特殊效果,该属性通常在 SliverAppBar...用来 Toolbar 标题下面显示一个 Tab 导航栏 this.elevation = 4.0,//纸墨设计控件 z 坐标顺序,默认值为 4,对于可滚动 SliverAppBar,当

88610

实现点击换一批来切换内容,flutter之CustomScrollView【flutter20个实例之八】

一、老套路,先看样式 左图是我业务样式,右图是下方源码展示样式(复制可直接运行,无额外组件引入) 二、讲解 1.涉及组件 首先,没有一个单一组件来实现这个效果 实现这个效果涉及以下组件: AppBar...:顶端栏,一个最基本软件 Text:文本 Container:布局组件 CustomScrollView:自定义滚动效果组件,比如列表网格组件都可以包含在其中 SliverGrid:网格视图组件 SliverList...:列表控件 InkWell:效果控件,可以给其他widget包裹一个点击效果 ListTile:标题组件,通常填充listview 2.首先设置下标题样式 getItem是我们主内容 @override...Widget build(BuildContext context) { return Scaffold( appBar: AppBar( leading...: AppBar( leading: new IconButton( icon: new Icon(Icons.arrow_back, color: Colors.black38

1.4K20

Flutter 构建完整应用手册-图片 顶

显示来自互联网图像 显示图像是大多数移动应用程序基础。 Flutter提供Image小部件以显示不同类型图像。 为了处理来自URL图像,请使用Image.network构造函数。...用占位符淡入图像 使用默认images小部件显示图像时,您可能会注意到它们加载时会弹出到屏幕上。 这可能会让用户产生视觉震撼。...相反,如果你最初可以显示一个占位符,那么它会不会很好,并且图像在加载时会淡入? 我们可以使用Flutter一起打包FadeInImage部件来达到这个目的!...除了缓存之外,cached_image_network软件包在加载时还支持占位符淡入淡出图像!...在这个例子,我们将在图片加载时显示一个蜘蛛。

1.2K20

初识顶部导航栏【flutter20个实例之一】

一、老套路,先看样式 右侧图是我实际开发业务界面,用作展示而已 二、讲解(后附源码) 1.这里主要是用户AppBar组件 /** AppBar({ Key key, this.leading...,//标题前面显示一个控件,首页通常显示应用 logo;在其他界面通常显示为返回按钮 this.automaticallyImplyLeading = true, this.title...,//Toolbar 主要内容,通常显示为当前界面的标题文字 this.actions,//一个 Widget 列表,代表 Toolbar 中所显示菜单,对于常用菜单,通常使用 IconButton...来表示;对于不常用菜单通常使用 PopupMenuButton 来显示为三个点,点击后弹出二级菜单 this.flexibleSpace,//一个显示 AppBar 下方控件,高度 AppBar...用来 Toolbar 标题下面显示一个 Tab 导航栏 this.elevation = 4.0,//纸墨设计控件 z 坐标顺序,默认值为 4,对于可滚动 SliverAppBar,当

1.3K20

FlutterAppBar、TabBarTabController——顶部切换栏是如何实现

顶部TabBar切换栏实现第一种方式 FlutterAppBar用于定义顶部导航栏: Scaffold( appBar: AppBar( title: Text("AppBarPageDemo...leading,导航栏最左侧(标题前面)显示组件,首页通常显示应用logo,在其他页面通常显示为返回按钮 actions,导航栏右侧(标题后面)显示组件组,通常使用IconButton来表示...但是有些时候,我们会遇到不可自定义原始AppBar场景,而我们又想实现顶部TabBar效果,此时我们就可以页面再加一个Scaffold组件,然后这样就有两个AppBar了。...好,现在我们已经知道该如何利用AppBarTabBar来实现顶部Tabbar视觉效果了。本文最后,我们来了解一下如何个性化设置顶部TabBar导航条。...3,页面的state(_TabBarControllerPageState)要声明并初始化一个TabController实例 (_tabController) 4, TabBar TabBarView

9.4K20

Flutter跨平台移动端开发

虽然从效果来看,父 widget 限制没有起作用,但是实际上它只是没有影响子 widget 大小,但还是占有了响应空间 ---- DecoratedBox(装饰盒) decoratedBox 可以给子...background = 子 widget 之后绘制,foreground = 子 widget 之前绘制 child:子 widget /** * @des DecoratedBox Widget...left:70.0), //容器外间距 constraints: BoxConstraints.tightFor(width: 200.0, height: 150.0), //卡片大小...= null), super(key: key); key:当前元素唯一标识符(类似于 Android id) appBar:顶部导航栏 body:主体部分 floatingActionButton...---- 本篇到此完结,更多 Flutter 跨平台移动端开发 原创内容持续更新~ 期待您 关注 / 点赞 / 收藏 向着 大前端工程师 晋级! ----

2.8K40

Flutter SliverAppBar全解析,你要效果都在这了!

先来简单看下部分效果图: 本文内容可能有点多,但是都很简单,配上效果图味道更佳~ 什么是SliverAppBar SliverAppBar 类似于AndroidCollapsingToolbarLayout...AppBar大部分属性重合,相当于AppBar加强版。 先从最基本效果开始,一步一步做到全效果。...SliverAppBar图标主题 this.actionsIconTheme,//action图标主题 this.textTheme,//文字主题 this.primary = true,//是否显示状态栏下面...,//标题横向间距 this.expandedHeight,//合并高度,默认是状态栏高度加AppBar高度 this.floating = false,//滑动时是否悬浮...添加TabBar SliverAppBarbottom属性添加TabBar,直接改造源码例子 var _tabs = []; _tabs = [

1.6K20

为什么说Flutter让移动开发变得更好?

让我们从Android构建此列表所需步骤开始: 用XML创建list-item布局文件 创建一个适配器来绑定视图并设置数据 为列表创建布局(可能在Activity或Fragment填充Fragment.../Activity列表布局 Fragment / Activity创建适配器,布局管理器等实例 在后台线程上从网络下载电影数据 回到主线程设置适配器项目 现在需要考虑保存恢复列表状态等细节...该应用程序包含了电影电视节目,并且开发过程没有遇到任何困难。我通过构建用于加载显示数据泛型类来实现,这使得我可以重复使用电影演出每个布局。...Flutter使用Databinding相同思想,即将视图/小部件绑定到变量,而无需Java / Kotlin手动管理数据绑定,不用专门绑定文件来桥接XMLJava。...: new AppBar( actions: [ new IconButton( icon: new Icon(Icons.star),

2K10

Flutter lesson 7: Flutter组件之基础组件(三)

web前端我们使用图标可以自己定义字体SVG,使用阿里图标上面的图标。Flutter,google则为我们集成了一些常用图标。...actions 正如上面的图片中看到,这个属性可以设置AppBar右侧显示。上面图片中显示了三个,说明这是一个Widget List。 ?...整个AppBar可能用得多地方就是leading,titleactions了吧。 bottom 一个 AppBarBottomWidget 对象,通常是 TabBar。...elevation 这个属性是设置整个AppBar阴影大小,值是一个double。 下面是设置了elevation: 20,前后对比,还是使用默认就可以了 ?...设置bottomNavigationBar时候,可能页面会很丑,我们可以放弃使用这个属性 drawer endDrawer 这两个都是抽屉盒子,drawer是从左往右滑动时候出现,endDrawer

1.5K50
领券