微信能否做门户网站,建筑企业设计公司,怎样将字体安装在wordpress,网站建设最好的公司03-Flutter移动电商实战-底部导航栏制作
1、cupertino_IOS风格介绍
在Flutter里是有两种内置风格的#xff1a;
material风格#xff1a; Material Design 是由 Google 推出的全新设计语言#xff0c;这种设计语言是为手机、平板电脑、台式机和其他平台提供一致#xff…03-Flutter移动电商实战-底部导航栏制作
1、cupertino_IOS风格介绍
在Flutter里是有两种内置风格的
material风格 Material Design 是由 Google 推出的全新设计语言这种设计语言是为手机、平板电脑、台式机和其他平台提供一致更广泛的外观和感觉。我喜欢称它为纸墨设计。Material Design 风格是一种非常有质感的设计风格并会提供一些默认的交互动画。cupertino风格即 IOS 风格组件它重现了很多经典的有 IOS 特性的交互和界面风格让适用于 IOS 的人感觉亲切和友好。并非选择了一种风格就要一直使用这种风格事实是你可以一起使用兼顾两个风格的特点。 我们在 index_page.dart 页面同时使用两种风格 UI 只需要在头部分引入了 cupertino.dart、material.dart。注意这两个引入是不分先后顺序的。
index_page.dart 文件
import package:flutter/cupertino.dart;
import package:flutter/material.dart;2、使用动态StatefulWidget
上篇文章为了测试入口文件我们在 index_page.dart 文件里使用了静态组件也就是继承了StatelessWidget。
正常情况下底部导航栏是要根据用户操作不断变化的所以我们改用动态组件StatefulWidget。
修改后的代码如下:
import package:flutter/material.dart;
import package:flutter/cupertino.dart;class IndexPage extends StatefulWidget {override_IndexPageState createState() _IndexPageState();
}class _IndexPageState extends StateIndexPage {overrideWidget build(BuildContext context) {return new Scaffold(appBar: new AppBar(title: new Text(百姓生活),),body: new Center(child: Text(我是居中的文本内容),),);}
}改编后的界面效果并未发生改变不截图了。
3、底部栏
有了动态组件接下来可以在State部分先声明一个List变量变量名称为boottomTabs变量的属性为BottomNavigationBarItem。
其实这个List变量就定义了底部导航的文字和使用的图标。
代码如下:
final ListBottomNavigationBarItem bottomTabs [BottomNavigationBarItem(icon:Icon(CupertinoIcons.home),title:Text(首页)),BottomNavigationBarItem(icon:Icon(CupertinoIcons.search),title:Text(分类)),BottomNavigationBarItem(icon:Icon(CupertinoIcons.shopping_cart),title:Text(购物车)),BottomNavigationBarItem(icon:Icon(CupertinoIcons.profile_circled),title:Text(会员中心)),];底栏的数据有了怎么使用呢
修改后的 index_page.dart 文件
import package:flutter/material.dart;
import package:flutter/cupertino.dart;class IndexPage extends StatefulWidget {override_IndexPageState createState() _IndexPageState();
}class _IndexPageState extends StateIndexPage {final ListBottomNavigationBarItem bottomTabs [BottomNavigationBarItem(icon:Icon(CupertinoIcons.home),title:Text(首页)),BottomNavigationBarItem(icon:Icon(CupertinoIcons.search),title:Text(分类)),BottomNavigationBarItem(icon:Icon(CupertinoIcons.shopping_cart),title:Text(购物车)),BottomNavigationBarItem(icon:Icon(CupertinoIcons.profile_circled),title:Text(会员中心)),];overrideWidget build(BuildContext context) {return new Scaffold(appBar: new AppBar(title: new Text(百姓生活),),body: new Center(child: Text(我是居中的文本内容),),bottomNavigationBar: BottomNavigationBar(type:BottomNavigationBarType.fixed,currentIndex: 0,items:bottomTabs,onTap: (index){},),);}
}效果图 下篇将打通4非底部导航栏关于界面切换以及底栏的实现可参考之前写的一篇文章Flutter实 ViewPager、bottomNavigationBar界面切换
posted 2019-06-14 20:43 niceyoo 阅读(...) 评论(...) 编辑 收藏
