flutter项目UI框架搭建最实用而且现在最流行的框架：下面几个tab按钮，点击按钮切换到相应的页面。-摩杜云开发者社区

Flutter实战—flutter项目UI框架搭建

flutter项目UI框架搭建

最实用而且现在最流行的框架：

下面几个tab按钮，点击按钮切换到相应的页面。

大家可以看看如图所示：

页面随着tab的切换而切换，随波逐流。

flutter项目UI框架搭建最实用而且现在最流行的框架：下面几个tab按钮，点击按钮切换到相应的页面。_flutter

下面代码具体实现：
1，新建一个flutter项目
2，在main.dart文件中编写app主入口
3，在app主入口中加入主页面的框架index_page
4，然后在index_page中编写，添加需要切换的几个page

main.dart类代码：

import 'package:flutter/material.dart';
import './pages/index_page.dart';
//程序主入口
void main() {runApp(MyApp());}
//void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: MaterialApp(
        title: "二元店+",
        debugShowCheckedModeBanner: false,
        theme:ThemeData(
          primaryColor:Colors.pink
        ),
          home:IndexPage()
      ),
    );
  }
}

index_page.dart类文件代码：

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

class IndexPage extends StatefulWidget {//动态切换页面 用 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.car), title: Text("汽车")),
    BottomNavigationBarItem(icon: Icon(CupertinoIcons.shopping_cart), title: Text("购物车")),
    BottomNavigationBarItem(icon: Icon(CupertinoIcons.book), title: Text("会员")),
  ];

  final List pageList = [HomePage(), CategoryPage(), CartPage(), MemberPage()];

  int currentIndex = 0;
  var currentPage;
  @override
  void initState() {
    currentPage = pageList[currentIndex];
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color.fromRGBO(245, 245, 245, 1.0),//北京
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,//类型
        items: bottomTabs,//底部tab
        currentIndex: currentIndex,//当前 index
        onTap: (index) {//点击后调用 setState 方法  然后会重新绘制页面
          setState(() {
            currentIndex = index;//点击的tab
            currentPage = pageList[currentIndex];//当前页面
          });
        },
      ),
      body: currentPage,//主体显示的是当前的页面
    );
  }
}

各个页面的文件代码：
MemberPage

import 'package:flutter/material.dart';

class MemberPage extends StatelessWidget {//动态切换页面 用 StatefulWidget
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(child:Text("商城会员")),
    );
  }
}

HomePage

import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(child:Text("商城首页")),
    );
  }
}

CategoryPage

import 'package:flutter/material.dart';

class CategoryPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(child:Text("商品分类")),
    );
  }
}

CartPage

import 'package:flutter/material.dart';

class CartPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(child:Text("购物车")),
    );
  }
}

这几个页面就简单写了几个字，这次就简简单单的编写出App的框架即可，
每个页面的具体内容请看下期内容
代码具体会上传至 github上，如有需要可以下载。
下载地址：（如对您有用，烦劳你start一下）
github源码