flutter之底部导航栏制作

最新推荐文章于 2024-06-19 18:17:32 发布
最新推荐文章于 2024-06-19 18:17:32 发布
阅读量613 收藏
点赞数 1
分类专栏： flutter
  1. 在lib目录下新建pages文件夹，并新建dart文件，效果如图所示

 

 

2.在main.dart文件中写代码，效果如图所示

 

3.在index_page.dart文件中写代码，效果如图所示

 

 

4.在home_page.dart文件中写代码，效果如图所示

 

5.在cateory_page.dart文件中写代码，效果如图所示

 

6.在cart_page.dart文件中写代码，效果如图所示

 

7.在member_page.dart文件中写代码，效果如图所示

 

效果如图所示：

 

 

chunchun1230
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Flutter 底部导航栏（Tab 页）的快速实现
卜大爷的博客
12-03 2万+
Flutter 底部导航栏（Tab 页）的快速实现 我们知道 Scaffold 实现了基本的 Material 布局。只要是在 Material 中定义了的单个界面显示的布局控件元素，都可以使用 Scaffold 来绘制。 如果我们想实现底部 Tab 页切换的效果，应该如何做呢？ bottomNavigationBar Scaffold 的 bottomNavigationBar 属性是一个 BottomNavigationBar 类型的对象。BottomNavigationBar 是底部导航条，可以帮助
Flutter 之bottomNavigationBar底部导航使用
艾米的猫儿的博客
02-07 1281
Flutter 之bottomNavigationBar底部导航使用，在MaterialApp下bottomNavigationBar的使用及自定义底部中间凸起导航效果
Flutter BottomNavigationBar组件使用详解，如何实现自定义底部导航栏
最新发布
keganyuan的博客
06-19 1300
自定义的样式包括颜色、形状和大小。你可以通过设置elevation和shape属性来实现。// 导航项数组// 当前选中项的索引// 点击导航项时触发的回调函数// 自定义选中项的颜色// 自定义未选中项的颜色// 导航栏的背景颜色// 导航栏的阴影大小// 导航栏的形状，这里设置为圆角),// 自定义选中项的图标主题size: 30.0, // 选中图标大小),// 自定义未选中项的图标主题size: 25.0, // 未选中图标大小),
Flutter 项目实战 底部导航 六
xcbyaya的博客
04-17 719
看到这篇文章的人不知道有多少是和我一样的Android程序员。35岁，这是我们这个行业普遍的失业高发阶段，这种情况下如果还不提升自己的技能，进阶发展，我想，很可能就是本行业的职业生涯的终点了。我们要有危机意识，切莫等到一切都成定局时才开始追悔莫及。只要有规划的，有系统地学习，进阶提升自己并不难，给自己多充一点电，你才能走的更远。千里之行始于足下。这是上小学时，那种一元钱一个的日记本上每一页下面都印刷有的一句话，当时只觉得这句话很短，后来渐渐长大才慢慢明白这句话的真正的含义。
Flutter底部导航BottomNavigationBar
juer2017的博客
07-13 1577
Flutter底部导航BottomNavigationBar
Flutter NavigationBar 优雅的实现底部导航栏菜单
代码小疯子
11-03 1833
在Flutter开发中NavigationBar 学用来配置底部菜单栏选项。
Flutter实现底部导航栏效果
08-27
Flutter实现底部导航栏效果 在本文中，我们将详细介绍如何使用Flutter实现底部导航栏效果。这是一个非常有价值的参考资料，感兴趣的小伙伴们可以参考一下。 首先，我们需要在main.dart文件中定义APP的基本信息，...
Flutter实现底部导航栏
08-26
Flutter实现底部导航栏 Flutter作为一个跨平台的移动应用开发框架，具有很高的开发效率和灵活性，对于实现底部导航栏这种常见的移动应用界面组件，Flutter提供了非常灵活和强大的解决方案。下面我们将详细介绍如何...
Flutter 底部导航栏示例
03-04
Flutter 底部导航栏（BottomNavigationBar）demo。 详情请看博客：https://yuzhiqiang.blog.csdn.net/article/details/88118902
Flutter 导航
yuehua18的博客
07-05 809
drawer是标题栏的侧边导航，里面可以放widget，分析它的布局，一共有一列，三行，因为UserAccountDrawerHeader 用来制作侧边导航的头部的，它用了两个容器包裹的，头部使用了flex布局，给头部设置背景图，在Expanded使用BoxDecoration来设置背景，不能直接使用Image.assets 要使用它的一个DecorationImage 来使用图片，然后将图片覆盖整个空间。然后为TabBar设置属性 为他美化。
【flutter底部导航栏】
xxx的博客
03-08 299
flutter底部导航样式实现
Flutter学习笔记仿闲鱼底部导航栏带有中间凸起图标
08-10
Flutter学习笔记--仿闲鱼底部导航栏带有中间凸起图标
android自定义的边缘凹凸的View
05-18
自定义的一个卡劵效果View，代码为AS构建，实现分析请看博客http://blog.csdn.net/yissan/article/details/51429281
Flutter系列之九：自定义bottomNavigationBar
hhbbeijing的专栏
05-10 1462
源码地址：GitHub - hhbbeijing/flutter_app_test 提交日期：2022-5-10 上章我们已能够自定义图片库，本示例我们将结合ttf 自定义bottomNavigationBar，作为企业级app的一部分。 一、制作TTF 1.1 将png转换为SVG： PNG转SVG – 在线将PNG文档转换成至SVG 转换成功后能够预览图片，否则显示失败。 2.2 制作 TTF 网址：iconfont-阿里巴巴矢量图标库 登录后，上传SVG到自己的项目 ...
Flutter快学快用11 多样式导航栏：掌握所有 Flutter 导航栏的设计
fegus的博客
09-21 1683
本课时介绍了控件 Scaffold 的一些基础用法，着重介绍了其中三个比较常用的属性 bottomNavigationBar、appBar 和 drawer，同时使用这些属性完成了我们顶部导航栏、底部导航栏、侧边导航栏和搜索功能的实现。学完本课时你需要掌握这些基础的导航栏设计的使用方法，其次了解控件 Scaffold 的其他属性的用法。本课时实现了 App 的基础结构，下一课时我将从内容展示的多样式来实现具体的 App 页面内容。点击此链接查看本课时源码。
Flutter 验证字符是否为空
半身风雪
11-05 3177
在日常开发中，可能存在必须检查给定字符串是null还是empty的情况。那么我们如何去验证呢？这里我将记录一个我自己封装的验证方法。
Flutter自定义底部导航栏
黑男人的博客
05-13 3503
一、原因 之前一直使用（Flutter SDK 1.2.1稳定版），遇到一个很不爽的问题——BottomNavigationBarItem 选中时 title中的文字会放大。有什么设置可以去掉这个放大呢? 国内的APP中很少有navigation item 有动画的！！！ 即搜索比首页的字号大，而且切换的时候是有动画的。 二、解决 在BottomNavigationBar的api中根本没有找到对...
Flutter - 实现底部导航栏
M_zoneL的博客
01-31 688
效果图：   代码如下： import 'package:flutter/material.dart'; class BottomTabBarWidget extends StatefulWidget { final Color backgroundColor; final Color indicatorColor; final List<Widget>...
Flutter底部tab切换保持页面状态的几种方法
--------→成人不自在，自在不成人℃ ------------
09-20 1860
通过视频我们可以看到，当通过底部tabBar将页面在“首页”和“分类”之间进行切换的时候，每一次进入页面的时候该页面的数据都会重新加载。那么如何让页面保持原来的状态，而不是每次都要重新加载刷新数据呢？有两种方式。 第一种方式：采用IndexdStack IndexdStack和Stack一样，都是层布局控件，可以在一个控件上面放置另一个控件，但唯一不同的是，IndexdStack在同一时刻只能...
flutter 底部导航栏的制作
05-09
Flutter 底部导航栏可以使用 `BottomNavigationBar` 组件来实现。 首先，需要在 `StatefulWidget` 的 `build` 方法中创建 `BottomNavigationBar` 组件并设置它的 `items` 属性，该属性接受一个包含每个导航项的 `BottomNavigationBarItem` 对象的列表。 例如： ```dart class MyBottomNavigationBar extends StatefulWidget { @override _MyBottomNavigationBarState createState() => _MyBottomNavigationBarState(); } class _MyBottomNavigationBarState extends State<MyBottomNavigationBar> { int _currentIndex = 0; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('My Bottom Navigation Bar'), ), body: Container( child: Center( child: Text('This is the $_currentIndex tab'), ), ), bottomNavigationBar: BottomNavigationBar( currentIndex: _currentIndex, onTap: (int index) { setState(() { _currentIndex = index; }); }, items: [ BottomNavigationBarItem( icon: Icon(Icons.home), label: 'Home', ), BottomNavigationBarItem( icon: Icon(Icons.search), label: 'Search', ), BottomNavigationBarItem( icon: Icon(Icons.person), label: 'Profile', ), ], ), ); } } ``` 在这个例子中，我们创建了一个 `_currentIndex` 变量来存储当前选中的导航项的索引。在 `build` 方法中，我们创建了一个包含三个导航项的 `BottomNavigationBar` 组件，并将其传递给 `bottomNavigationBar` 属性。每个导航项都由一个 `BottomNavigationBarItem` 对象表示，它包含一个图标和一个标签。 我们还为 `BottomNavigationBar` 组件设置了 `currentIndex` 属性，以确定当前选中的导航项。当用户点击某个导航项时，我们使用 `onTap` 回调函数来更新 `_currentIndex` 变量，并调用 `setState` 方法来重建界面。 最后，我们将 `BottomNavigationBar` 组件放在 `Scaffold` 组件的 `bottomNavigationBar` 属性中，并将其他内容放在 `Scaffold` 组件的 `body` 属性中。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值