文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

能动手就别吵吵！

公司项目开篇 街角的咖啡店 鲍勃：“弗老师，我想尝试用Flutter实现我们公司APP的效果” 弗拉德：“嗯，给我看下要实现什么样的效果？” 鲍勃：“嗯，很简单。就是下面这样的：” ?...弗拉德：“UI挺简单的，我们一步步来吧。先从底部的导航栏开始做吧” 弗拉德：“你准备怎么做呢，现在有想法吗？”...鲍勃：“首先，我肯定要定义顶部每一个Tab的类TabItem.dart” 1class TabItem { 2 TabItem({this.tabName, this.tabId}); 3 4...不错” 鲍勃：“接下来，我是需要一个能在底部切换Tab的这种控件。弗老师，Flutter有这种widget吗？” 弗拉德：”嗯，你的思路很正确。...,discovery.dart,mine.dart“ 以fit.dart为例，其它类似： 1// 目前我们只做底部导航栏，先不考虑上面这些模块之间内容的区别，可以用同一个代替 2import 'package

64910

使用BottomNavigationBar来定义底部导航栏

在iOS中，底部导航栏使用UITabBar就可以实现；在Flutter中，类似的效果可以通过BottomNavigationBar这个组件实现。...BottomNavigationBar有如下常见属性： items，这是一个装有 BottomNavigationBarItem 类型元素的List，即底部导航条按钮的集合 iconSize，icon...如下图所示，我在lib文件夹下新建了一个pages文件夹，用于装所有的页面；pages文件夹下面又创建了一个tabs文件夹，用于装载跟底部导航栏相关的页面。 ?...如果你导入的文件与当前文件属于同一级，也就是说在同一个文件夹下，那么直接写文件名即可，比如在Tabbar.dart中导入其他三个文件，就可以像下面这样写： import 'Home.dart'; import...，这样底部导航栏就会自己进行适配，可以全部完美展示出来了。

1.4K30
您找到你想要的搜索结果了吗？
是的
没有找到

用 Flutter 搭建标签+导航框架

Widget 的性质 ---- 我自己写了这几个界面之后深切的体会到 Widget 真实Flutter 中一个很重要的概念，要是把它展开了往细了说，真的能写出一片文章出来，在下面的参考文章中第一篇就有详细的介绍这个...，比如说我们在 Demo 中有建立一个和 main 平级的 TabsPage，我们引用的时候是下面这样的： /// 导入一个和自己平级的文件 import 'TabsPage.dart';...那在比如说，在 home 文件夹下有一个 HomePage.dart ,那我们是否还能直接像上面那样直接去引用呢？...Scaffold ，Scaffold 是 Material library 中提供的一个 Widget, 它提供了默认的导航栏、标题和包含主屏幕 Widget 的body属性。...title: Text("周边"), ), ); } 复杂点的我们后面遇到了在总结，既然提到了导航那就得说一下界面之间的跳转了，我们看看像上面gif中的挑战效果我们是怎么做的

1.2K10

Flutter | 容器组件

，他的类型为 Decoration 是一个抽象类，定义了一个接口 createBoxPainter() ,子类的主要职责是通过实现它来创建一个画笔，该笔用于绘制装饰。..., ), ), 复制代码 实际上就是给最外层套了一个Padding Scaffold，TabBar，底部导航 一个完整的路由页面可能会包含导航栏，抽屉菜单(Drawer) 以及底部 Tab 导航栏菜单等...： AppBar：一个导航栏骨架 MyDrawer：抽屉菜单 BottomNavigationBar：底部导航栏 FloatingActionButton：漂浮按钮 AppBar Appbar 是一个...，MediaQuery.removePadding 可以移除 Drawer 默认的一些留白 底部 Tab 导航栏 我们可以通过 Scaffold 的 BottomNavigationBar 属性来设置底部导航...，如上面的示例，我们通过 Material 组件提供的 BottomNavigationBar 和 BottomNavigationBarItem 来实现底部导航栏，代码也非常简单 但是如果要实现一些特殊的效果要怎么做呢

5.5K10

Flutter实现页面切换后保持原页面状态的3种方法

前言： 在Flutter应用中，导航栏切换页面后默认情况下会丢失原页面状态，即每次进入页面时都会重新初始化状态，如果在initState中打印日志，会发现每次进入时都会输出，显然这样增加了额外的开销，...它拥有一个固定的底部导航以及首页的顶部导航，可以看到不管是点击底部导航切换页面还是在首页左右侧滑切换页面，之前的页面状态都是始终维持的，下面就具体介绍下如何在flutter中实现类似喜马拉雅的导航效果...第一步：实现固定的底部导航 在通过flutter create生成的项目模板中,我们先简化一下代码，将MyHomePage提取到一个单独的home.dart文件，并在Scaffold脚手架中添加bottomNavigationBar...为了进一步优化，下面我们使用PageView+AutomaticKeepAliveClientMixin重写之前的底部导航，其中PageView和TabBarView的实现原理类似，具体选择哪一个并没有强制要求...至此，如何实现一个类似的 底部 + 首页顶部导航 完结 ~ 总结 以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对ZaLou.Cn的支持。

2.5K30

Flutter开发-容器类组件

一个完整的路由页可能会包含导航栏、抽屉菜单(Drawer)以及底部Tab导航菜单等。...我们实现一个页面，它包含： 一个导航栏 导航栏右边有一个分享按钮 有一个抽屉菜单 有一个底部导航 右下角有一个悬浮的动作按钮 代码如下： class ScaffoldRoute extends StatefulWidget...MyDrawer 抽屉菜单 BottomNavigationBar 底部导航栏 FloatingActionButton 漂浮按钮 AppBar AppBar是一个Material风格的导航栏，通过它可以设置导航栏标题...、导航栏菜单、导航栏底部的Tab标题等。...“bottom”属性来添加一个导航栏底部Tab按钮组 Material组件库中提供了一个TabBar组件，它可以快速生成Tab菜单，下面是上图对应的源码： class _ScaffoldRouteState

3.5K20

TAB导航与侧边抽屉导航的巅峰对决

设想你需要设计一个含有许多页面和模块，不能在一屏内显示完全的应用。你一定会首先想到去设计一个底部或顶部的Tab导航。等一下，多出来的一排导航看上去有点碍眼？...我想，在这里分享下我们的经验是很有价值的。 可用性 vs. 干净的设计 ? 当第一次开始zeekbox项目，我们使用了顶部的tab导航。我们的理由很简单“看不到的不记挂”。...当然了，既然Facebook都这么做了，那这种方案应该是好的吧，我这么想。...为了保证用户能清楚地发现侧导航，我们在应用初次打开的时候，设置侧边栏是展开显示着的，像下图这样： ? 新版本刚发布的时候，我们的用户反馈很棒（都是诸如“喜欢新的设计，全5分！”...感谢A/B test，让我们在一段时间的验证后快速的将所有用户切换到了tab导航的方案。 如果关于使用侧边栏还是tab的争论也出现在你们团队中，我想我们的研究经验值得与你们分享。

2.7K70

Flutter 组件集录 | 桌面导航 NavigationRail

---- theme: cyanosis 我们都知道 BottomNavigationBar 是一个移动端非常常用的底部导航栏组件，可以用于点击处理激活菜单，并通过回调来处理界面的切换。...图片 ---- 但是在桌面端，由于一般是宽大于高，所以 BottomNavigationBar 并不适用。而是侧边的导航栏较为常见，比如下面飞书的客户端界面布局。...BottomNavigationBar 和 NavigationRail 两个导航就是如此，从语义上来看 Bottom 就是用于底部的导航， Rail 是 扶手 、铁轨 的意思，作为侧栏导航的语义，还是很生动有趣的...，如何让它像飞书的导航那样，在最尾部呢？...另外像 拖动更换菜单位置 这样的交互，我们也只通过自定义组件来实现。

3K20

React Native(四)——顶部以及底部导航栏实现方式

大家好，又见面了，我是全栈君。 效果图： 一步一步慢慢来： 其实刚入手做app的时候，就应该做出简单的顶部以及底部导航栏。无奈又在忙其他事情，导致这些现在才整理出来。...够简单吧……对了，这样的代码看起来才比较“优雅”（容忍zheng小叶正儿八经的胡说八道哦~）而主要的代码就在 //顶部导航栏 import TopTabBar from '....留下来的~~~ ---- PS:尴尬的事情猝不及防的发生了…… 一直想不明白，顶部导航栏跟底部导航栏同时存在的情况下，怎样控制各自的功能呢？...于是再请教完做手机开发的同事后才恍然大悟，原来自己想的顶部导航栏根本不是顶部导航栏，简言之就是自己把布局搞错了！...明明只是有底部导航栏，而所谓的“顶部导航栏”也只是底部导航栏中的第一小部分里面嵌套着一个轮播组件，才会给人以错觉，啊啊啊……事实真相居然是这样的~ 发布者：全栈程序员栈长，转载请注明出处：https:/

3K20

Flutter开发之路由与导航的实现

要打开一个新的页面，只需要创建一个MaterialPageRoute对象实例，然后调用Navigator.push()方法将新页面压到路由堆栈的顶部即可，如果要返回上一个页面，则可以调用Navigator.pop...路由嵌套在移动开发中是很常见的，比如，移动开发中经常会看到应用主页有底部导航栏，每个底部导航栏又嵌套其他页面的情况，效果如下图所示。 ?...要实现上面的示例效果，首先需要新建一个底部导航栏，然后再由底部导航栏去嵌套其他子路由。...关于底部导航栏的实现，可以直接使用Scaffold布局组件的bottomNavigationBar属性实现，如下所示。...，底部的导航栏栏并不会消失，这是因为子路由仅在自己的范围内有效。

3.2K10

Flutter底部tab切换保持页面状态的几种方法

_currentIndex], bottomNavigationBar: BottomNavigationBar( fixedColor: Colors.red,//底部导航栏按钮选中时的颜色...type: BottomNavigationBarType.fixed,//底部导航栏的适配，当item多的时候都展示出来 currentIndex: this....使用IndexedStack来保持页面状态的优点就是配置简单，但是它也有很大的缺点：IndexedStack中管理的子页面在一开始就全部一次性加载出来了，不管有没有显示出来，然后通过index属性来确定到底显示哪一个页面..._pages, ), bottomNavigationBar: BottomNavigationBar( fixedColor: Colors.red,//底部导航栏按钮选中时的颜色...type: BottomNavigationBarType.fixed,//底部导航栏的适配，当item多的时候都展示出来 currentIndex: this.

5.9K20

Flutter常用的布局和事件示例详解

以及手势事件和滚动事件的使用 Scaffold 导航栏的实现,有些路由页可能会有抽屉菜单(Drawer)以及底部Tab导航菜单等 const Scaffold({ Key key, this.appBar...,//侧滑菜单左 this.endDrawer,//侧滑菜单右 this.bottomNavigationBar,//底部导航 this.backgroundColor,//背景颜色 this.resizeToAvoidBottomPadding...this.highlightElevation: 12.0,//高亮阴影 @required this.onPressed,//点击事件 this.mini: false//是否使用小图标 }) 底部导航栏...自定义一个LoadingWidget,传递isLoading是否正在加载中,child加载成功后显示的布局.这样的好处就是我们可以在任何需要用到加载中的布局时,直接使用,统一管理.使用setState来改变...PageView 类似Android中的ViewPage组件,他还可以实现底部导航栏的效果 Flutter官网PageView 首先看一下PageView有哪些属性,代码如下: PageView({

2.2K40

1小时，不会代码的我如何完成 网易云音乐 大作业网页制作？（IVX 第2篇）

1_bit：简单，你直接可以使用一个像 PS 一样的编辑器绘制出一个网页，然后把那个 HTML 导出，这样你就可以完成你的作业了。 小媛：还可以这样？...小媛：好的，迫不及待了。 二、导航栏制作 1_bit：我们第一步先制作一个导航栏，下图黄色框选位置就是导航栏。 小媛：不会做… 1_bit：你不用打代码，我们画出来就可以了。...小媛：好了，下一步呢？ 1_bit：下一步我们由于是做的是一个导航栏，那么这个导航栏是横排显示的，那么我们可以选择一个行组件，这时在这个组件中添加一些文本就可以横排显示。 小媛：什么是组件呀？...1_bit：这个时候我们发现，鼠标移动进去后颜色发生了改变，但是鼠标移走后颜色没变，这该怎么做呢？ 小媛：哈哈哈，就是鼠标移出嘛，我会。...1_bit：你的外边距是可以设置为负数的，我在这里设置顶部外边距为-35，就可以放到图片上了，但是在这里要注意，一定要设置背景的透明度，这样才可以达到半透明的状态。

1.8K30

Flutter容器类组件

Decoration是一个抽象类，它定义了一个接口 createBoxPainter()，子类的主要职责是需要通过实现它来创建一个画笔，该画笔用于绘制装饰。...Scaffold(脚手架) 5.1 Scaffold介绍 一个完整的路由页可能会包含导航栏、抽屉菜单(Drawer)以及底部 Tab 导航菜单等。...下面构造一个完整的路由页面对其进行讲解: 导航栏 导航栏右侧分享按钮 抽屉菜单 底部导航栏 悬浮按钮 class HomePage extends StatefulWidget { const HomePage...风格的导航栏，通过它可以设置导航栏标题、导航栏菜单、导航栏底部的Tab标题等。...下面这部分代码可以绘出一个美观的底部导航栏： bottomNavigationBar: BottomAppBar( color: Colors.white, shape: CircularNotchedRectangle

3.9K40

周末小圆桌 |第1期

最近有个视觉同学转交互，想让我帮他看下作品集。聊得过程中发现了一个大家普遍存在的问题，就是想把自己的能力全部在作品集里体现。这样导致的问题就是没有重点。...Alan****: 我想请问下shawn，Facebook安卓版把标签栏放置到上面了，更加的安卓，界面更轻量化，然后我就有个疑问。。。...为什么市场上的APP到现在还是大多的使用iOS的底部标签栏，而不使用Material Design的顶部标签栏？...随着屏幕越来越大屏，双手操作的场景总是要比单手操作来的更加方便，那么顶部标签栏会是以后的一个组件趋势吗？...顶部除了导航还承载标题展示，返回等更多操作，所以顶部导航不见得会适用于所有app。顶部，底部，侧边栏，悬浮球……都是常见的导航模式。所以是否是一个趋势要看具体产品形态是否适合。

29020

Flutter中的AppBar、TabBar和TabController——顶部切换栏是如何实现的

下面我将为你一一说明这些属性的作用： title，导航栏的标题，是一个Widget，通常显示为当前界面的标题文字，但是也可以放其他的组件，比如可以放TabBar。...但是在有些情况下，我们需要在顶部也需要定义一个TabBar，用于切换不同的功能页面，如下面这种页面： ? 这个时候就需要用到AppBar的bottom属性了。...AppBar是一个顶部导航栏，它的title属性用于配置标题，title对应的是一个组件，我们一般给title赋值为一个Text组件，但是也可根据需求给title赋值其他的组件。...我们可以像上面所讲的，给内层的Scaffold组件的appBar配置bottom属性值为TabBar组件，但是这样的话，内层的Scaffold组件的title的位置就会有一个留空，不好看，如下所示： ?...好，现在我们已经知道该如何利用AppBar和TabBar来实现顶部Tabbar的视觉效果了。在本文的最后，我们来了解一下如何个性化设置顶部TabBar导航条。

9.6K20
点击加载更多

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

更多标签

活动推荐

    运营活动

    活动名称
    广告关闭

    腾讯云开发者

    扫码关注腾讯云开发者

    扫码关注腾讯云开发者

    领取腾讯云代金券

    热门产品

    热门推荐

    更多推荐

    Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

    深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

    腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

    领券