首页 技术 正文
技术 2022年11月23日
0 收藏 575 点赞 4,846 浏览 2827 个字

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 State<IndexPage> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(title: new Text("百姓生活+"),),
      body: new Center(
        child: Text("我是居中的文本内容"),
      ),
    );
  }
}

改编后的界面效果并未发生改变,不截图了。

3、底部栏

有了动态组件,接下来可以在State部分先声明一个List变量,变量名称为boottomTabs,变量的属性为BottomNavigationBarItem。

其实这个List变量就定义了底部导航的文字和使用的图标。

代码如下:

final List<BottomNavigationBarItem> 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 State<IndexPage> {  final List<BottomNavigationBarItem> 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('会员中心')
    ),
  ];  @override
  Widget 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){        },
      ),
    );
  }
}

效果图:

03-Flutter移动电商实战-底部导航栏制作

下篇将打通4非底部导航栏,关于界面切换以及底栏的实现可参考之前写的一篇文章:
Flutter实 ViewPager、bottomNavigationBar界面切换

微信扫一扫

支付宝扫一扫

本文网址:https://www.zhankr.net/141202.html

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:875 阅读:5,067
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:806 阅读:3,504
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:565 阅读:4,312
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:730 阅读:4,307
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:4,904
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:3,097
发表评论
暂无评论

还没有评论呢,快来抢沙发~

助力内容变现

将您的收入提升到一个新的水平

点击联系客服

在线时间:8:00-16:00

客服电话

400-888-8888

客服邮箱

ceotheme@ceo.com

扫描二维码

关注微信公众号

扫描二维码

手机访问本站