Flutter Widget之BottomNavigationBar

Widget:https://flutter.io/docs/development/ui/widgets
BottomNavigationBar:https://docs.flutter.io/flutter/material/BottomNavigationBar-class.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
import 'package:flutter/material.dart';

class BottomNavigationBarDemoPage extends StatefulWidget {
@override
State<StatefulWidget> createState() => new _BottomNavigationBarDemoPageState();
}

class _BottomNavigationBarDemoPageState extends State<BottomNavigationBarDemoPage> {

int _selectedIndex = 1;
final _widgetOptions = [
Text('Index 0: Home'),
Text('Index 1: Business'),
Text('Index 2: School'),
];

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('BottomNavigationBar Sample'),
),
body: Center(
child: _widgetOptions.elementAt(_selectedIndex),
),
bottomNavigationBar: BottomNavigationBar(
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('Home')),
BottomNavigationBarItem(icon: Icon(Icons.business), title: Text('Business')),
BottomNavigationBarItem(icon: Icon(Icons.school), title: Text('School')),
],
currentIndex: _selectedIndex,
fixedColor: Colors.deepPurple,
onTap: _onItemTapped,
),
);
}

void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
}

Flutter Widget BottomNavigationBar

Powered by AppBlog.CN     浙ICP备14037229号

Copyright © 2012 - 2020 APP开发技术博客 All Rights Reserved.

访客数 : | 访问量 :