按照iOS的逻辑先来一个tabbar

class RootPageWidget extends StatefulWidget {
  @override
  _RootPageWidgetState createState() => _RootPageWidgetState();
}

class _RootPageWidgetState extends State<RootPageWidget> {
  List pages = [Page1(), Page1(), Page1(), Page1(), Page1()];
  int currentIndex = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: BottomNavigationBar(
        onTap: (index) {
          // 选择对应的索引
          setState(() {
            currentIndex = index; // 页面切换
          });
        },
        currentIndex: currentIndex, // 默认选择的 页面
        fixedColor: Colors.green, // 选中颜色
        type: BottomNavigationBarType.fixed, // 设置个类型
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.chat), label: 'wewe'),
          BottomNavigationBarItem(icon: Icon(Icons.chat), label: 'wewe1'),
          BottomNavigationBarItem(icon: Icon(Icons.chat), label: 'wewe2'),
          BottomNavigationBarItem(icon: Icon(Icons.chat), label: 'wewe3'),
        ],
      ),
      body: pages[currentIndex],
    );
  }
}

class Page1 extends StatefulWidget {
  @override
  _Page1State createState() => _Page1State();
}

class _Page1State extends State<Page1> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('sas')),
      body: Text('sasa'),
    );
  }
}

效果

iOS App 启动图标启动图还需要手动去原生工程设置
Android 在左侧目录里 android 文件夹下 --- app -src-main-AndroidManifest.xml

启动图等配置
导入本地添加的文件夹路径
使用本地导入的图片

下面我从网上找了个资源创建一个WeChat的demo

上面tabbar里面的页面我们挨个创建一个，先创建一个发现页面代码如下
import 'package:flutter/material.dart';
import 'package:wechat_demo/pages/discover/discover_cell.dart';

class DiscoverPage extends StatefulWidget {
  Color themColor = Color.fromRGBO(220, 220, 220, 1);
  @override
  _DiscoverPageState createState() => _DiscoverPageState();
}

class _DiscoverPageState extends State<DiscoverPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: widget.themColor, // 访问所属小部件的变量 widget.themColor
        /// 以下三个是 Android 专用属性
        centerTitle: true, // Android 的属性
        title: Text('发现'),
        elevation: 0.0, // 去掉导航栏的阴影
      ),
      body: Container(
        color: widget.themColor,
        height: 800,
        child: ListView(
          /// 相当于 cell
          children: [
            DiscoverCell(
              imageName: 'images/朋友圈.png',
              title: '朋友圈',
            ),
            SizedBox(
              height: 10,
            ),
 DiscoverCell(
              title: '视频号',
              imageName: 'images/朋友圈.png',
            ),
            SizedBox(
              height: 10,
            ),
            DiscoverCell(
              imageName: 'images/扫一扫.png',
              title: '扫一扫',
            ),
            Row(
              children: [
                Container(
                  width: 50,
                  height: 0.5,
                  color: Colors.white,
                ),
              ],
            ),
            DiscoverCell(
              imageName: 'images/摇一摇.png',
              title: '摇一摇',
            ),
            SizedBox(
              height: 10,
            ),
            DiscoverCell(
              title: '看一看',
              imageName: 'images/看一看icon.png',
            ),
            DiscoverCell(
              title: '搜一搜',
              imageName: 'images/搜一搜.png',
            ),
            SizedBox(
              height: 10,
            ),
            DiscoverCell(
              title: '附近的人',
              imageName: 'images/附近的人icon.png',
            ),
            SizedBox(
              height: 10,
            ),
            DiscoverCell(
              title: '购物',
              imageName: 'images/购物.png',
              subTitle: '618限时特价',
            ),
            Row(
              children: [
                Container(
                  color: Colors.white,
                  width: 50,
                  height: 0.5,
                )
              ],
            ),
            DiscoverCell(
              title: '游戏',
              imageName: 'images/游戏.png',
            ),
            SizedBox(
              height: 10,
            ),
            DiscoverCell(
              title: '小程序',
              imageName: 'images/小程序.png',
              subTitle: '618限时特价',
              subImageName: 'images/badge.png',
            ),
          ],
        ),
      ),
    );
  }
}

import 'package:flutter/material.dart';
import 'package:wechat_demo/pages/discover/discover_child_page.dart';

class DiscoverCell extends StatelessWidget {
  final String title;
  final String subTitle;
  final String imageName;
  final String subImageName;

  DiscoverCell({this.title, this.subTitle, this.imageName, this.subImageName});

  @override
  Widget build(BuildContext context) {
    return GestureDetector(// 点击事件组件包裹的都可响应事件
      onTap: () {
        print("hello");
        Navigator.of(context).push(MaterialPageRoute(// 导航跳转
            builder: (BuildContext context) => DiscoverChildPage(
                  title: title,
                )));
      },
      child: Container(
        color: Colors.white,
        height: 54,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            //left
            Container(
              padding: EdgeInsets.all(10),
              child: Row(
                children: [
                  Image(
                    image: AssetImage(imageName),
                    width: 20,
                  ),
                  SizedBox(
                    width: 15,
                  ),
                  Text(title),
                ],
              ),
            ),

            // right
            Container(
              padding: EdgeInsets.all(10),
              child: Row(
                children: [
                  subTitle != null ? Text(subTitle) : Text(''),
                  subImageName != null
                      ? Image(
                          image: AssetImage(subImageName),
                          width: 12,
                        )
                      : Container(),
                  Image(
                    image: AssetImage('images/icon_right.png'),
                    width: 15,
                  )
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

import 'package:flutter/material.dart';

class DiscoverChildPage extends StatelessWidget {
  final String title;
  DiscoverChildPage({this.title});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: Text('$title'),
      ),
    );
  }
}

效果图

下一篇：