美文网首页
flutter - 底部栏切换

flutter - 底部栏切换

作者: 反者道之动001 | 来源:发表于2019-08-25 17:05 被阅读0次

使用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<MyApp> {
  int _selectedIndex = 0;
  List <Widget>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: <String, WidgetBuilder> {
        '/play': (BuildContext context) => PlayPage(),
      },
    );
  }
  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }
}

--END--

相关文章

网友评论

      本文标题:flutter - 底部栏切换

      本文链接:https://www.haomeiwen.com/subject/pbqkectx.html