Flutter开发 - 写一个漂亮的导航栏

最新推荐文章于 2024-10-08 12:07:29 发布
最新推荐文章于 2024-10-08 12:07:29 发布
阅读量540 收藏
点赞数
分类专栏： Flutter实用开发技巧合集 文章标签： 导航栏 flutter导航栏 flutter title AppBar
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/CodingFire/article/details/113753316
版权
本文介绍了在Flutter中创建自定义导航栏的方法，包括设置颜色、标题样式、左右按钮，以及调整导航栏高度，实现iOS风格。通过实例展示了如何创建灵活多变的导航栏，并提到了`centerTitle`属性用于标题居中。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在iOS中，你要写一个漂亮的导航栏，如果想要自己定制，那是需要花点时间的，甚至可能你要完全重写，而且导航栏中存在很多你设置后不生效的东西，对于初学者，甚至入门三四年的人的来说，依然是一个噩梦。

而在Flutter中，Flutter为我们提供了丰富的组件，你可以选择像在iOS里那样自定义一个view，来作为导航栏，但是相较于iOS中的使用，Flutter更为强大，接下来，博主就带大家来看一下Flutter的导航栏。

1.结构
要想使用系统的导航栏，必须要按照一定的结构来写页面。

Widget build(BuildContext context) {
   
    return Scaffold(
      appBar
了解本专栏 订阅专栏 解锁全文 超级会员免费看
Flutter 自定义导航
WangQingLei0307的博客
02-07 2211
在开发过程中我们100%会使用到导航，当然Flutter也为我们提供了导航控件，但是自带的往往没有没有那么灵活，所以这个时候就需要我们自定义一个导航，下面就给大家讲解如果绘制一个简单的自定义导航。 我们还是通过代码的方式来讲解 我这里给自定义导航类命名为TitleNavBar.dart import 'package:flutter/material.dart'; class TitleNavBar extends StatefulWidget { String leftString.
Flutter开发 - 写一个块状带订单数量角标的个人中心页面，这个布局有点意思
CodingFire的博客
07-29 1776
个人中心页面 为什么要挑这个页面来讲解下布局呢，因为它比较具有代表意义，块状的布局，包含Row，Column，Stack。最主要的是角标的处理方式。在一般的页面中，我们都采用上下布局，左右布局，列表等来做，很巧合的是这里基本都有，同时有一个要注意的点是角标，属于绝对位置的布局。 首先我们来解析一下这个个人中心页面； 顶部导航栏； 头部个人信息； 订单和其他中的Item项（角标要注意下）； 这个页面由三部分组成，我们分别来说下三部分怎么实现： 顶部导航栏 appBar: AppBar(
Flutter 自定义底部导航栏
01-07
文件结构： main.dart import 'package:flutter/material.dart'; import 'pages/tabs.dart'; void main() => runApp(new MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Tabs(), ); } } tabs.dart import 'package:flutte
Flutter 封装可自定义样式的沉浸式导航栏 NavigationBar
weixin_43800535的博客
02-22 1308
Flutter 封装可自定义的沉浸式导航栏 NavigationBar
flutter——首页顶部的自定义导航栏
z15267429952的博客
01-26 372
override@overridelength: 2,),),),actions: [},),],// 标签的切换// 去掉长的下划线// 指示器的大小tabs: [Tab(child: Text("推荐",style: TextStyle(fontSize: 16.0),),),Tab(child: Text("发现",style: TextStyle(fontSize: 16.0),),),],),),Column(],),
【Flutter】头部导航条变换
Emperor_huanzi 的博客
08-11 563
CustomScrollView( slivers: <Widget>[ SliverPersistentHeader( delegate: SliverHeaderDelegate( minHeight: MediaQuery.of(context).padding.top + 44, maxHeight: 211,
切换所选项目时，漂亮而简单的底部导航栏具有流畅的动画。-Flutter开发
05-27
标题为底部导航栏美观，干净，简单的底部导航栏，单击时具有流畅的动画。 此程序包可高度自定义，并带有标题的底部导航栏。美观，干净，简单的底部导航栏，单击时具有流畅的动画效果。 此程序包可高度自定义，有关更...
Flutter 自定义顶部导航栏（方法一）
01-20
在Flutter开发中，自定义顶部导航栏是提升应用界面独特性和用户体验的重要手段。在这个示例中，我们将讨论如何使用Flutter的Material库中的组件来创建一个自定义的顶部导航栏，也就是AppBar。首先，我们来看看提供的...
Flutter 基于AppBar自定义导航栏基类
wahkim的博客
11-22 1070
Flutter 基于AppBar自定义导航栏基类
Flutter 自定义顶部导航栏（方法二）
01-08
文件结构： routes.dart import 'package:flutter/material.dart'; import '../pages/tabs.dart'; import '../pages/AppBarDemo.dart'; import '../pages/TabBarController.dart'; final routes = { '/': (context) => Tabs(), '/appBarDemo':(context)=>AppBarDemoPage(), '/tabBarController':(context)=>TabBarContro
13个漂亮的JS导航菜单
01-07
13个漂亮的JS导航菜单 13种样式,个个好看、实用， 欢迎下载
Flutter实现底部导航栏
08-26
主要为大家详细介绍了Flutter实现底部导航栏的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
fab-circular-menu:Flutter程序包，用于使用“浮动动作按钮”创建漂亮的圆形菜单
05-03
FAB通告菜单 Flutter程序包，可使用Floating Action Button创建漂亮的圆形菜单。 受到出色的设计的启发。 安装 只需将fab_circular_menu添加到您的文件中 dependencies : fab_circular_menu : ^1.0.0 例子 class MyApp extends StatelessWidget { @override Widget build ( BuildContext context) { return MaterialApp ( home : Scaffold ( body : Placeholder (), floatingActionButton : FabCircularMenu ( children : < Widget>
Flutter实现左侧边栏导航
04-14
Flutter实现左侧边栏导航,点击左侧菜单右侧自动切换,左侧菜单可以实现自动居中,右侧滚动到底部继续滑可自动切换到下一页,上滑切换到上一页,左侧菜单跟随切换,查看效果图: https://image-static.segmentfault.com/172/110/1721107406-621de42a1cd7b
Flutter 导航
yuehua18的博客
07-05 1337
drawer是标题栏的侧边导航，里面可以放widget，分析它的布局，一共有一列，三行，因为UserAccountDrawerHeader 用来制作侧边导航的头部的，它用了两个容器包裹的，头部使用了flex布局，给头部设置背景图，在Expanded使用BoxDecoration来设置背景，不能直接使用Image.assets 要使用它的一个DecorationImage 来使用图片，然后将图片覆盖整个空间。然后为TabBar设置属性 为他美化。
Flutter 自定义顶部导航按钮及TabBar定义顶部 Tab 切换
weixin_46136019的博客
03-21 1748
return DefaultTabController(length: 2 , //列数title: Row(children: [ Expanded(child: TabBar(isScrollable: true,//多个菜单可以滑动labelColor: Colors.cyan,//选中颜色unselectedLabelColor: Colors.white,//未选中颜色tabs: [ Tab(text: '热销' ,) ,
Flutter全局统一自定义导航栏返回按钮
最新发布
smileKH的博客
10-08 1527
首先，我们可以通过自定义leading属性来创建一个返回按钮。leading属性定义了AppBar的前置部分，通常用于放置返回按钮。AppBar(},),title: Text('自定义返回按钮'),),为了在全局范围内统一自定义返回按钮，我们可以创建一个自定义的Widget，然后在每个需要的Scaffold中使用它。actions;Key?key,@override},),@override然后，在每个页面中使用Scaffold(
flutter实战之美化 container
wniuniu_的博客
02-02 736
我们要去美化一下container。另外，首先我们要了解可以通过。中可以设置对称轴的对齐方式。对于价钱的格式我们可以借助。来设置边距和边框，可以在。中来设置美化样式，对于。我们看看最后的美化代码。
Flutter仿闲鱼凸起图标底部导航栏开发实战
在探讨如何使用Flutter框架实现一个类似于闲鱼应用的底部导航栏，并具有中间凸起图标的组件时，我们首先要了解Flutter的基础知识以及相关的组件。 Flutter是谷歌开发的一款开源移动应用开发框架，它允许开发者使用...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

CodingFire

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值