flutter搭建一个基础框架

三个页面,main主界面主入口,TabNavigator 底部导航栏,HomePage 主界面
main.dart 页面

import 'package:demoflutter/navigator/tab_navigator.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(

        primarySwatch: Colors.blue,
      ),
      home: TabNavigator(),
    );
  }
}

tab_navigator.dart

import 'package:demoflutter/page/home_page.dart';
import 'package:flutter/material.dart';

//底部状态栏点击
class TabNavigator extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _TabNavigator();
  }
}

class _TabNavigator extends State<TabNavigator> with SingleTickerProviderStateMixin {

  //页面
  final pages = <Widget>[
    HomePage(),
    HomePage(),
    HomePage(),
    HomePage(),
  ];

  //title和图标
  List<String> titles = ['首页', '搜索', '旅拍', '我的'];
  List<IconData> icons = [
    Icons.home,
    Icons.search,
    Icons.camera_alt,
    Icons.contacts
  ];

  int _currentIndex = 0;

  //初始化页面控制器,并设置默认选择页面
  final _controller = PageController(initialPage: 0);

  @override
  Widget build(BuildContext context) {
    // 脚手架
    return Scaffold(
      body: PageView(
        controller: _controller,
        children: pages,
        physics: NeverScrollableScrollPhysics(),
      ),
      bottomNavigationBar: BottomNavigationBar(
          currentIndex: _currentIndex,
          onTap: (index) {
            _controller.jumpToPage(index);
            setState(() {
              _currentIndex = index;
            });
          },
          type: BottomNavigationBarType.fixed,
          items: getBarItems()),
    );
  }



  List<BottomNavigationBarItem> getBarItems() {
    final _defaultColor = Colors.grey;
    final _activieColor = Colors.blue;

    List<BottomNavigationBarItem> list = [];
    for (int i = 0; i < titles.length; i++) {
      BottomNavigationBarItem barItem = BottomNavigationBarItem(
        icon: Icon(
          icons[i],
          color: _defaultColor,
        ),
        activeIcon: Icon(
          icons[i],
          color: _activieColor,
        ),
        title: Text(
          titles[i],
          style: TextStyle(
              color: _currentIndex != i ? _defaultColor : _activieColor),
        ),
      );

      list.add(barItem);
    }

    return list;
  }
}

home_page.dart

import 'package:flutter/material.dart';

//首页页面
class  HomePage extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _HomePage();
  }

}

class _HomePage  extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      body:Container(
        child:  Text("首页"),
      ),
    );
  }
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值