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

如何在PrefrerredSize中居中AppBar和减小前导图标的大小?

在PreferredSize中居中AppBar和减小前导图标的大小,可以通过以下步骤实现:

  1. 首先,创建一个PreferredSize的Widget,用于包裹AppBar,并设置其preferredSize属性为所需的AppBar高度。
代码语言:txt
复制
PreferredSize(
  preferredSize: Size.fromHeight(80), // 设置AppBar的高度
  child: AppBar(
    // AppBar的内容
  ),
),
  1. 要居中AppBar,可以在AppBar的leading和title之间添加一个空的FlexibleSpaceBar,将其alignment属性设置为Alignment.center。
代码语言:txt
复制
PreferredSize(
  preferredSize: Size.fromHeight(80),
  child: AppBar(
    leading: Container(), // 空的leading
    flexibleSpace: Align(
      alignment: Alignment.center,
      child: Container(
        // AppBar的标题和其他内容
      ),
    ),
  ),
),
  1. 要减小前导图标的大小,可以使用IconButton作为leading,并设置其iconSize属性为所需的大小。
代码语言:txt
复制
PreferredSize(
  preferredSize: Size.fromHeight(80),
  child: AppBar(
    leading: IconButton(
      icon: Icon(Icons.menu),
      iconSize: 24, // 设置图标大小
      onPressed: () {
        // 点击图标的回调函数
      },
    ),
    flexibleSpace: Align(
      alignment: Alignment.center,
      child: Container(
        // AppBar的标题和其他内容
      ),
    ),
  ),
),

通过以上步骤,你可以在PreferredSize中居中AppBar并减小前导图标的大小。请注意,以上代码仅为示例,你可以根据自己的实际需求进行调整和修改。

关于腾讯云相关产品和产品介绍链接地址,由于要求不能提及具体的云计算品牌商,建议你参考腾讯云的官方文档和网站,了解他们的云计算产品和解决方案。

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

相关·内容

6详解AppBar小部件

由于它是一个如此常用的组件,因此 Flutter 为该功能提供了一个名为AppBar的专用小部件。 在本教程,我们将通过一些实际示例向您展示如何在 Flutter 应用程序自定义 AppBar。...前导宽度 如果leading未提供,AppBar 会自动为我们暗示。...AppBar( backgroundColor: Colors.deepOrange[500], ), 图标主题 下面的代码将图标的颜色更改为绿色,将大小更改为36: AppBar( actionsIconTheme...工具栏高度不透明度 最后,我们有工具栏属性。工具栏包含文字,图标,按钮,其他任何公司的前景,除了小部件,ContainerImage。...如果你已经做到了这一步,你现在应该明白: AppBar 是什么以及它如何在 Flutter 中使用 AppBar 的布局 ( leading, title, actions) 如何自定义 AppBar

16.4K10

Flutter构建布局 顶

在这个例子,每个文本小部件放置在容器以添加边距。 整个行也被放置在容器以在行的周围添加填充。 本例的其余UI由属性控制。 使用其color属性设置图标的颜色。...以下示例显示如何在行或列内嵌套行或列。 此布局按行组织。 该行包含两个孩子:左侧的一列右侧的图片: ? 左列的小部件树嵌套行列。 ? 您将在嵌套行实现一些Pavlova的布局代码。...Material Components Card: 将相关信息组织成带有圆角投影的盒子。 ListTile: 将最多3行文本,以及可选的前导训练图标组合成一行。...默认情况下,卡片将其大小缩小为0像素0。 您可以使用SizedBox来限制卡的大小。 在Flutter,一张卡片具有稍微圆润的角落阴影,使其具有3D效果。...3行文本可选的前导尾随图标的行。

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

    一、老套路,先看样式 右侧是我的实际开发业务界面,用作展示而已 二、讲解(后附源码) 1.这里主要是用户AppBar组件 /** AppBar({ Key key, this.leading...,在首页通常显示应用的 logo;在其他界面通常显示为返回按钮 this.automaticallyImplyLeading = true, this.title,//Toolbar 主要内容...下方的控件,高度 AppBar 高度一样,可以实现一些特殊的效果,该属性通常在 SliverAppBar 中使用 this.bottom,//一个 AppBarBottomWidget 对象...改值通常下面的三个属性一起使用 this.brightness,//App bar 的亮度,有白色黑色两种主题,默认值为 ThemeData.primaryColorBrightness...this.iconTheme,//App bar 上图标的颜色、透明度、尺寸信息。

    1.4K20

    Flutter | 布局组件

    Text 是继承自 StatelessWidget ,然后在 build 方法通过 RichText 构建子树,而 RichText 才是继承自 MultiChildRenderObjectWidget...在 Flutter 通过 Row Column 来实现线性布局,类似于 Android 的 LinearLayout 控件 Row Column 都继承子 Flex,至于 Fiex 暂不多说...则这个 Column 会占用尽可能多的空间,这个栗子为屏幕的高度 crossAxisAlignment 为 center,表示在纵轴上居中对齐。...,所以在 getSize 返回一个固定大小来指定 Flow 的大小 层叠布局 Stack,Positioned 层叠布局 Android 的 FrameLayout 布局是相似的,子组件可以通过父容器的四个角的位置来确定自身的位置...第二个子组件 I am 345 只指定了 水平方位 left,属于部分定位,即垂直没有定位,那么他在垂直方向上会按照 aligment 进行对齐,即为垂直居中 第三个 your friend 第二个一样

    2.7K30

    【Flutter】StatelessWidget 组件 ( Container 组件 | BoxDecoration 组件 | Text 组件 | Icon 组件 )

    Icon 组件 六、 相关资源 一、StatelessWidget 组件 ---- Flutter 中一切都是组件构成的 ; 其中最重要的两个组件是 ① 无状态的 StatelessWidget 组件 ...), ), ); } } 运行效果 : 三、BoxDecoration 组件 ---- BoxDecoration 装饰器可一般用于设置组件的装饰效果 , 背景颜色 , 背景图片...BoxDecoration(color: Colors.grey), // 设置 child 子组件居中方式, 居中放置 alignment: Alignment.center...BoxDecoration(color: Colors.grey), // 设置 child 子组件居中方式, 居中放置 alignment: Alignment.center...BoxDecoration(color: Colors.grey), // 设置 child 子组件居中方式, 居中放置 alignment: Alignment.center

    1.8K01

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

    基本类型  var 可以定义变量, var tag = "666" ,这 JS 、 Kotlin 等语言类似,同时 Dart 属于动态类型语言,支持闭包。  ...Dart number 类型分为 int double ,其中 java 的 long 对应的也是 Dart 的 int 类型。Dart 没有 float 类型。  ...new Column( ///主轴居中,即是竖直向居中 mainAxisAlignment: MainAxisAlignment.center, ///大小按照最小显示...代码中注释,布局内主要是现实一个居中的Icon图标和文本,中间间隔5.0的 padding: ///返回一个居中带图标和文本的Item _getBottomItem(IconData icon...然后在 _DemoPageState,通过build创建了一个Scaffold。 Scaffold内包含了一个AppBar一个ListView。

    3.6K30

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

    基本类型  var 可以定义变量, var tag = "666" ,这 JS 、 Kotlin 等语言类似,同时 Dart 属于动态类型语言,支持闭包。  ...Dart number 类型分为 int double ,其中 java 的 long 对应的也是 Dart 的 int 类型。Dart 没有 float 类型。  ...new Column( ///主轴居中,即是竖直向居中 mainAxisAlignment: MainAxisAlignment.center, ///大小按照最小显示...代码中注释,布局内主要是现实一个居中的Icon图标和文本,中间间隔5.0的 padding: ///返回一个居中带图标和文本的Item _getBottomItem(IconData icon...然后在 _DemoPageState,通过build创建了一个Scaffold。 Scaffold内包含了一个AppBar一个ListView。

    2K30

    Flutter Stack、Positioned 层叠布局

    Flutter的Stack,相当于Android里的FrameLayoutRelativeLayout。...层叠布局Web的绝对定位、Android的Frame布局是相似的,子组件可以根据距父容器四个角的位置来确定自身的位置。绝对定位允许子组件堆叠起来(按照代码声明的顺序)。...fit: 此参数用于确定没有定位的子组件如何去适应Stack的大小。StackFit.loose表示使用子组件的大小,StackFit.expand表示扩伸到Stack的大小。...举个例子,在水平方向时,你只能指定left、right、width三个属性的两个,指定leftwidth后,right会自动算出(left+width),如果同时指定三个属性则会报错,垂直方向同理...3、示例 在下面的例子,我们通过对几个Text组件的定位来演示StackPositioned的特性: import 'package:flutter/material.dart'; class StackDemo

    1.9K10

    MindManager2022序列号密钥解压安装程序教程

    Ctrl+Shift+,减小字体大小 ⑥ Ctrl+Shift+F更改字体颜色 ⑦ Ctrl+Shift+S对选定文本应用删除线效果 ⑧ Ctrl+Shift+C填充所选主题的背景颜色 ⑨ Ctrl+Space...⑤ end 移至同级主题底部 ⑥ Backspace/Shift+Backspace 在主题选择历史记录前进/后退 四、导图文件 ① Ctrl+F2打印预览 ② Ctrl+O 打开导 ③ Ctrl...+S保存当前导 ④ Alt+Ctrl+Shift+F搜索导 ⑤ F12另存为 ⑥ Ctrl+W/Ctrl+Shift+F4 关闭当前导 ⑦ Ctrl+P 打印当前导 ⑧ Ctrl+N 建立新导...Shift+page down 大步滚动导向上/向下 ⑧ Ctrl+F3 居中并折叠所有主题 ⑨ Ctrl+F6查看下一张导 ⑩ Ctrl+Shift+F6查看上一张导 六、剪切,复制,粘贴删除...+Ctrl+V 粘贴为下一个主题(同级主题) ⑦ Ctrl+Shift+V 粘贴为备注 ⑧ Delete 删除主题或对象 ⑨ Ctrl+Shift+Delete 删除选定的主题(但保留子主题) 七、导级别过滤

    9.1K10

    Flutter 组件集录 | AppBar 组件 - 从源码中学习

    ---- _AppBarState 需要处理滑动相关的监听的通知,如果不查阅源码,肯定不知道还有这回事。另外,反过来,我们也能学到:如何在一个状态类,监听到滑动通知的事件。...在平时的滑动过程似乎 AppBar 并没有什么滑动相关的东西。...AppBar 状态类的主题处理 在 _AppBarState#build 方法,在一开始可以看到关于主题数据的处理。主要通过 Theme AppBarTheme 两个主题来处理默认属性。...本质原因如下, NavigationToolbar 的 centerMiddle 属性会根据平台来判定是否将标题居中,在 iOS/macOS 平台中,当 actions 为空或长度小于 2 时,标题会居中...这就是为什么将 flexibleSpace 设置为图片,就能当 AppBar 主题背景的原因。

    1.1K30

    掌握Flutter底部导航栏:畅游导航之旅

    我们将介绍如何创建基本的底部导航栏结构,自定义其外观,实现与页面的切换状态管理,并探索一些高级功能,徽章、动画效果等。...我们创建了一个包含“Home”标签home图标的导航项。...Flutter提供了丰富的选项,使开发者可以轻松自定义底部导航栏的外观,包括选中项的颜色图标、背景颜色形状、导航栏的高度以及图标的大小等。在本节,我们将介绍如何实现底部导航栏的自定义外观。...要调整底部导航栏的高度,可以使用BottomNavigationBar的fixedHeight属性来指定固定高度,也可以使用BottomNavigationBar的selectedIconTheme属性来调整图标的大小...此外,我们还探讨了如何利用状态管理库(ProviderBloc)来管理底部导航栏的状态,以及如何实现一些高级功能,添加徽章、动态更改导航栏项以及实现动画效果等。

    36210

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

    我在之前的文章文本、图片按钮在Flutter怎么用,简单介绍过按钮组件,本篇文章来详细聊聊Flutter的各种按钮组件的各种应用场景。...children: [ Row( mainAxisAlignment: MainAxisAlignment.center, //水平方向上居中...IconButton、ButtonBar、自定义按钮组件 IconButton这个组件一般是用在定义顶部导航栏上的按钮: appBar: AppBar( centerTitle...floatingActionButton: FloatingActionButton( child: Icon( Icons.add, color: Colors.black,//图标的颜色...3,如果我们想要修改悬浮按钮的尺寸大小,可以在其外层包一个Container组件。 4,可以通过配置Container的圆角内边距,来实现悬浮按钮外层的白色不透明圆边的效果。

    9.5K31

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

    Container可以包含一个单独的子元素,但不是专门用来做子元素布局的,对于布局,Flutter提供了其他组件Row、Column或Stack。...width height: 容器的宽度高度。 alignment: 控制子Widget如何在容器内对齐。...fit: 如何调整非定位子组件的大小。默认值是StackFit.loose,意味着子组件自身决定其大小。...每个 Container 都有自己的尺寸颜色。在 Stack ,这些容器会按照列表的顺序层叠显示,最先出现的在底部,最后出现的在顶部。...3.2.实现定位 在Flutter,使用StackPositioned组件可以实现类似CSS的绝对定位效果。Positioned组件可以指定子组件在Stack的确切位置。

    1.1K30

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

    4.1.3 MaterialApp MaterialApp是Flutter开发的符合Material设计理念的Widget,可以将它类比为网页开发的标签,它提供了路由、主题色标题等功能。...AppBar是Flutter应用的顶部导航栏组件,可以用来控制路由、标题溢出下拉菜单。...RaisedButton、FlatButtonOutlineButton等Material按钮组件都有一个图标构造函数,可以使用它来创建带图标的按钮。...Image组件常见属性: fit属性用于指定图片的填充模式,取值如下: BoxFit.fill:全显示,图片有可能被拉伸,造成图片变形; BoxFit.contain:全显示,图片不会变形,超出显示空间的部分会被剪裁...focusNode:用于控制TextField组件是否获取输入焦点,它是用户键盘交互的一种常见方式。 decoration:用于控制TextField组件的外观显示,提示文本、背景颜色边框。

    12.5K30
    领券