Flutter-底部導航欄切換

Posted 2020-11-21 ssjf

程序入口

import ‘package:flutter/material.dart‘;
import ‘botton_navigation_widget.dart‘;


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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: ‘demo‘,
      theme:ThemeData.light(),
      home: BottomNavigationWidget()//導航Widget
    );
  }
}

導航widget

import ‘package:flutter/material.dart‘;
import ‘index.dart‘;
import ‘campus_network.dart‘;
import ‘curriculum.dart‘;
import ‘personal_center.dart‘;

class BottomNavigationWidget extends StatefulWidget {
  @override
  _BottomNavigationWidgetState createState() => _BottomNavigationWidgetState();
}

class _BottomNavigationWidgetState extends State<BottomNavigationWidget> {
  final _BottomNavigationColor = Colors.blue;
  //現在的索引
  int _currentIndex = 0;
  //widget集合
  List<Widget> list = List();
  //重寫初始化方法,將需要導航的widget添加到集合
  @override
  void initState() {
    list
      //..相當於list.
      ..add(IndexScreen())
      ..add(CurriculumScreen())
      ..add(CampusNetworkScreen())
      ..add(PersonalCenterScreen());
    super.initState();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: list[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(
            icon: Icon(
              Icons.crop_3_2,
              color:_BottomNavigationColor,
            ),
            title: Text(
              ‘首頁‘
            ),
          ),
          BottomNavigationBarItem(
            icon: Icon(
              Icons.crop_3_2,
              color:_BottomNavigationColor,
            ),
            title: Text(
                ‘課程‘
            ),
          ),
          BottomNavigationBarItem(
            icon: Icon(
              Icons.crop_3_2,
              color:_BottomNavigationColor,
            ),
            title: Text(
                ‘分校網絡‘
            ),
          ),
          BottomNavigationBarItem(
            icon: Icon(
              Icons.crop_3_2,
              color:_BottomNavigationColor,
            ),
            title: Text(
                ‘個人中心‘
            ),
          ),
        ],
        //高亮顯示
        currentIndex: _currentIndex,
        //點擊導航時更新現在的下標
        onTap: (int index){
          setState(() {
            _currentIndex = index;
          });
        },
      ),
    );
  }
}

需要跳轉的widget

import ‘package:flutter/material.dart‘;

class IndexScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(‘index‘),
      ),
      body: Center(
        child: Text(‘index‘),
      ),
    );
  }
}