flutter学习九 页面基本结构

页面基本结构

//1，引入material包
import 'package:flutter/material.dart';
//2，运行包
void main() => runApp(MyApp());
//3，继承statelessWidegt基本组件
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context){
//4，返回container布局组件
return Container(
//5，引入MaterialApp组件
      child: MaterialApp(
        debugShowCheckedModeBanner: false,//关闭右上角debug
        title: 'Flutter App',
        theme: ThemeData(//页面主体颜色
          primaryColor: Colors.pink,
        ),
        home: Scaffold(//home组件引入scaffold
          appBar: AppBar(title: Text('Home Page')),//顶部导航
          body: Container(child: Text('Home Body')),//主体内容
          bottomNavigationBar: BottomNavigationBar(//底部导航
            currentIndex: 0,
            onTap: (i){},
            items: [
              BottomNavigationBarItem(icon: Icon(Icons.home),title: Text('Home')),
              BottomNavigationBarItem(icon: Icon(Icons.search),title: Text('Search')),
              BottomNavigationBarItem(icon: Icon(Icons.settings),title: Text('Setting')),
            ],
          ),
        ),
      ),
    );
  }
}

BottomNavigationBar基本切换

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 Container(
      child: MaterialApp(
        debugShowCheckedModeBanner: false,
        title: 'Flutter App',
        theme: ThemeData(
          primaryColor: Colors.pink,
        ),
        home: IndexPage(),
      ),
    );
  }
}

Index_page.dart 新建对应的页面

import 'package:flutter/material.dart';
import 'home_page.dart';
import 'member_page.dart';
import 'category_page.dart';
import 'cart_page.dart';
//StatefulWidget 有状态组件
class IndexPage extends StatefulWidget {
  _IndexPageState createState() => _IndexPageState();
}
//BottomNavigationBar底部导航组件变量
class _IndexPageState extends State {
  final List barItem = [
        BottomNavigationBarItem(icon: Icon(Icons.home),title: Text('Home')),
        BottomNavigationBarItem(icon: Icon(Icons.search),title: Text('Category')),
        BottomNavigationBarItem(icon: Icon(Icons.shopping_cart),title: Text('Cart')),
        BottomNavigationBarItem(icon: Icon(Icons.settings),title: Text('Member'))
      ];
//需要加载的页面变量page[index]加载对应页面
  final List page = [
    HomePage(),
    CategoryPage(),
    CartPage(),
    MemberPage()
  ];
  int currentIndex = 0;//加载第几个页面
  var pageNow;//当前页面
  @override
//initState状态组件，在state对象被插入视图树时调用
  void initState(){
    pageNow = page[currentIndex];
    super.initState();
  }
  @override
  Widget build(BuildContext context){
    return Scaffold(
      appBar: AppBar(title: Text('Flutter App')),
      body: pageNow,
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        currentIndex: currentIndex,
        onTap: (i){
          setState((){//setState状态更新组件
            currentIndex = i;
            pageNow = page[i];
          });
        },
        items: barItem,
      ),
    );
  }
}