flutter - 底部栏切换

使用flutter脚手架组件,快速实现底部几大金刚。

import 'package:flutter/material.dart';
import './pages/home/index.dart';
import './pages/my/index.dart';
import './pages/play/index.dart';

void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
  @override
  _ScaffoldRouteState createState() => _ScaffoldRouteState();
}

class _ScaffoldRouteState extends State {
  int _selectedIndex = 0;
  List list = [
    Home(),
    My(),
  ];
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '初九网络工作室',
      home: Scaffold(
        body: list[_selectedIndex],
        bottomNavigationBar: BottomNavigationBar(
          items:  [
            BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('首页')),
            BottomNavigationBarItem(icon: Icon(Icons.person), title: Text('个人中心')),
          ],
          currentIndex: _selectedIndex,
          onTap: _onItemTapped,
        ),
      ),
      routes:  {
        '/play': (BuildContext context) => PlayPage(),
      },
    );
  }
  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }
}

--END--

你可能感兴趣的:(flutter - 底部栏切换)