首页
学习
活动
专区
工具
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...工具栏高度和不透明度 最后,我们有工具栏属性。工具栏包含文字,图标,按钮,和其他任何公司的前景,除了小部件,如Container和Image。...如果你已经做到了这一步,你现在应该明白: 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.7K30

    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。

    2.3K30

    Flutter Stack、Positioned 层叠布局

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

    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属性来调整图标的大小...此外,我们还探讨了如何利用状态管理库(如Provider和Bloc)来管理底部导航栏的状态,以及如何实现一些高级功能,如添加徽章、动态更改导航栏项以及实现动画效果等。

    48110

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

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

    12010

    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.8K31

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

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

    12.5K30
    领券