文档章节

flutter tabbar创建与显示

o
 osc_g8254g7s
发布于 2019/08/19 17:57
字数 232
阅读 12
收藏 0

精选30+云产品,助力企业轻松上云!>>>

效果图

main.dart

import 'package:flutter/material.dart';
import 'pages/index_page.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '百姓生活+',
      home: IndexPage(),
      theme: ThemeData.light(),
    );
  }
}

indexPage.dart

import 'package:flutter/material.dart';
import 'home_page.dart';
import 'category_page.dart';
import 'cart_page.dart';
import 'person_page.dart';

class IndexPage extends StatefulWidget {
  @override
  _IndexPageState createState() => _IndexPageState();
}

class _IndexPageState extends State<IndexPage> {
  
  final List<BottomNavigationBarItem> bottomTabs = [
    BottomNavigationBarItem(
      icon: Icon(Icons.home),
      title: Text('首页')
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.category),
      title: Text('分类')
    ),
     BottomNavigationBarItem(
      icon: Icon(Icons.shopping_cart),
      title: Text('购物车')
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.person),
      title: Text('我的')
    )
  ];

  final List tabBodies = [
    HomePage(),
    CategoryPage(),
    CartPage(),
    PersonPage()
  ];

  int currentIndex = 0;

  var currentPage;

  void initState(){
    currentPage = tabBodies[currentIndex];
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: currentPage,
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        currentIndex: currentIndex,
        items: bottomTabs,
        onTap: (index){
          setState(() {
            currentIndex = index;
            currentPage = tabBodies[index];
          });
        },
      )
    );
  }
}

home_page.dart


import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title:  Text('HomePage')),
    );
  }
}

category_page.dart


import 'package:flutter/material.dart';

class CategoryPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title:  Text('CategoryPage')),
    );
  }
}

cart_page.dart


import 'package:flutter/material.dart';

class CartPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title:  Text('CartPage')),
    );
  }
}

person_page.dart


import 'package:flutter/material.dart';

class PersonPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title:  Text('PersonPage')),
    );
  }
}
o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
Flutter完整开发实战详解(二、 快速开发实战篇)

 作为系列文章的第二篇,继《Flutter完整开发实战详解(一、Dart语言和Flutter基础)》之后,本篇将为你着重展示:如何搭建一个通用的Flutter App 常用功能脚手架,快速开发一个完整的 Flutte...

恋猫月亮
2018/08/06
0
0
Flutter AppBar 自定义顶部导航按钮 图标、颜色 以及 TabBar 定义顶部 Tab 切换

Flutter AppBar 自定义顶部按钮图 标、颜色 属性 描述 leading 在标题前面显示的一个控件,在首页通常显示应用 的 logo;在其他界面通常显示为返回按钮 title 标题,通常显示为当前界面的标题...

osc_bg494qeb
2019/07/24
8
0
Flutter TabBar

先看一下Tab的构造方法: TabBar({ }) Tab使用方法 import 'package:flutter/material.dart'; class MyHomePage extends StatefulWidget {@overridecreateState() => new MyHomePageState();}......

osc_a4i7fthx
2018/12/17
4
0
七、优化Tabbar

目录 一、Tabbar问题 二、底部Tabbar 三、顶部Tabbar 最近一直忙于基于FreeSwitch的Sip融合通信了,没有及时更新文章。技术的更新太快了,每天都会出现各种框架和技术技巧,是学不完的,也只...

星星编程
2019/07/18
0
0
flutter 混合开发踩坑日记

flutter与原生交互主要需要处理两个问题 ①路由跳转 使用咸鱼的FlutterBoost(目前项目正在使用中...) 下载demo,移植部分代码即可使用 使用哈喽出行提供的解决方案flutterthrio,据说性能处理...

qqcc1388
05/30
0
0

没有更多内容

加载失败,请刷新页面

加载更多

深入浅出Zabbix 3.0 -- 第二章 Zabbix Web操作与定义

第二章 Zabbix Web操作与定义 本章介绍Zabbix 中一些基本概念的定义和web前端页面的操作,包括Zabbix中使用的一些术语的定义,Web页面中用户管理、主机和主机组的管理,以及监控项、模板、触...

osc_5zaxkz1e
7分钟前
0
0
深入浅出Zabbix 3.0 -- 第一章 Zabbix 安装与配置

第一章 Zabbix 安装与配置 1.1 Zabbix 介绍 Zabbix是一个企业级的开源监控软件,可以监控IT基础架构的可用性和应用的性能,为用户提供集中管理、分布式监控的一站式(all in one)监控解决方...

osc_nvkeo9cj
8分钟前
0
0
PHP 实现抽奖逻辑

public static function get_rand($proArr) { $result = ''; //概率数组的总概率精度 $proSum = array_sum($proArr); //概率数组循环 forea......

chenhongjiang
8分钟前
0
0
struts2 上传 下载

东方部落: http://11144439.blog.51cto.com struts中上传文件功能小测试。这里jar是 2.5 版本。 项目结构图 废话不多说,直接代码。 2. web.xml配置 <?xml version="1.0" encoding="UTF-8......

osc_1qix3fyb
9分钟前
12
0
SVN管理系统安装及其操作

SVN管理系统安装及操作 防伪码:学习永远不晚! 前言: SVN是Subversion的简称,是一个开放源代码的版本控制系统,相较于RCS、CVS,它采用了分支管理系统,它的设计目标就是取代CVS。互联网上...

osc_afifi2qt
10分钟前
19
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部