Flutter-APP首页框架搭建-Scaffold与PageView

APP首页框架搭建

• 实现首页导航需要哪些材料
• 什么是Scaffold widget?
• 什么是PageView?
• 实现首页导航

实现首页导航需要哪些材料

• Scaffold
• BottomNavigationBar
• PageView
• PageController

什么是Scaffold widget?

Scaffold 是一个实现了基本 material design 的布局结构

class Scaffold extends StatefulWidget {
  /// Creates a visual scaffold for material design widgets.
  const Scaffold({
    Key key,
    this.appBar,
    this.body,
    this.floatingActionButton,
    this.floatingActionButtonLocation,
    this.floatingActionButtonAnimator,
    this.persistentFooterButtons,
    this.drawer,
    this.endDrawer,
    this.bottomNavigationBar,
    this.bottomSheet,
    this.backgroundColor,
    this.resizeToAvoidBottomPadding,
    this.resizeToAvoidBottomInset,
    this.primary = true,
    this.drawerDragStartBehavior = DragStartBehavior.start,
    this.extendBody = false,
    this.drawerScrimColor,
  }) : assert(primary != null),
       assert(extendBody != null),
       assert(drawerDragStartBehavior != null),
       super(key: key);
  ......

顶部导航

底部导航菜单

import 'package:flutter/material.dart';
import 'package:flutter_app/pages/homePage.dart';
import 'package:flutter_app/pages/myPage.dart';
import 'package:flutter_app/pages/oilPage.dart';
import 'package:flutter_app/pages/forumPage.dart';

class TabNavigator extends StatefulWidget{
  //_TabNavigatorState定义好后，就可以修改该函数的返回值进行返回
  @override
  _TabNavigatorState  createState()=>_TabNavigatorState();
}

//在dart里面，如果要定义一个内部类，不能被外部访问的话，就可以以下划线开头
class _TabNavigatorState extends State<TabNavigator>{
  final _defaultColor = Color(0xFF333333);
  final _selectedColor = Color(0xFFFFD91C);
  int _selectedIndex = 0;

  final PageController _controller = PageController(
    //初始状态下打开第0个tab
    initialPage: 0,
  );
  @override
  Widget build(BuildContext context){
    //在build（）方法里面，可以将Scaffold（）作为整个页面的根节点
    return Scaffold(
      //body中定义一个PageView
      body: PageView(
        //pageview中使用一个controller
        controller: _controller,
        //禁用滚动事件
        physics: NeverScrollableScrollPhysics(),
        //处理页面切换时选中的页面
//        onPageChanged:(index){
//          _controller.jumpToPage(index);
//          setState(() {
//            _selectedIndex=index;
//          });
//        } ,
        //要显示的页面
        //需要显示“首页”、“加油”、“车友会”、“我的”
        children: <Widget>[
          HomePage(),
          OilPage(),
          ForumPage(),
          MyPage()
        ],
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _selectedIndex,
          type: BottomNavigationBarType.fixed,
          onTap: (index){
            _controller.jumpToPage(index);
            setState(() {
              _selectedIndex=index;
            });
          },
          items: [
            BottomNavigationBarItem(
              icon:Image.asset("images/tabbar_home.png"),
              activeIcon: Image.asset("images/tabbar_home_sel.png"),
              title: Text(
                "首页",
                style: TextStyle(color: _selectedIndex!=0?_defaultColor:_selectedColor)
              ),
            ),
            BottomNavigationBarItem(
              icon:Image.asset("images/tabbar_oil.png"),
              activeIcon: Image.asset("images/tabbar_oil_sel.png"),
              title: Text(
                  "加油",
                  style: TextStyle(color: _selectedIndex!=1?_defaultColor:_selectedColor)
              ),
            ),
            BottomNavigationBarItem(
              icon:Image.asset("images/tabbar_forum.png"),
              activeIcon: Image.asset("images/tabbar_forum_sel.png"),
              title: Text(
                  "车友会",
                  style: TextStyle(color: _selectedIndex!=2?_defaultColor:_selectedColor)
              ),
            ),
            BottomNavigationBarItem(
              icon:Image.asset("images/tabbar_me.png"),
              activeIcon: Image.asset("images/tabbar_me_sel.png"),
              title: Text(
                  "我的",
                  style: TextStyle(color: _selectedIndex!=3?_defaultColor:_selectedColor)
              ),
            ),
          ]
      ),
    );
  }
}

侧拉菜单

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  final appTitle = 'Drawer Demo';
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: appTitle,
      home: MyHomePage(title: appTitle),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final String title;
  MyHomePage({Key key, this.title}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(title)),
      body: Center(child: Text('My Page!')),
      drawer: Drawer(
        // Add a ListView to the drawer. This ensures the user can scroll
        // through the options in the Drawer if there isn't enough vertical
        // space to fit everything.
        child: ListView(
          // Important: Remove any padding from the ListView.
          padding: EdgeInsets.zero,
          children: <Widget>[
            DrawerHeader(
              child: Text('Drawer Header'),
              decoration: BoxDecoration(
                color: Colors.blue,
              ),
            ),
            ListTile(
              title: Text('Item 1'),
              onTap: () {
                // Update the state of the app
                // ...
                // Then close the drawer
                Navigator.pop(context);
              },
            ),
            ListTile(
              title: Text('Item 2'),
              onTap: () {
                // Update the state of the app
                // ...
                // Then close the drawer
                Navigator.pop(context);
              },
            ),
          ],
        ),
      ),
    );
  }
}

什么是PageView

PageView是一个可以完成页面之间滚动的widget。类似于Android中的ViewPager

class PageView extends StatefulWidget {
   PageView({
    Key key,
    this.scrollDirection = Axis.horizontal, //滚动的方向，支持水平和垂直两个方向
    this.reverse = false, //是否反方向滚动
    PageController controller, //PageView的控制类
    this.physics, //手势滚动逻辑，支持不滚动，总是滚动，与滚动到边缘时是否有bounce
    this.pageSnapping = true,//设置为false以禁用页面捕捉，对自定义滚动行为很有用。
    this.onPageChanged,//页面切换时调用
    List<Widget> children = const <Widget>[],
  }) : controller = controller ?? _defaultPageController,
       childrenDelegate = SliverChildListDelegate(children),
       super(key: key);
...