阅读 176

Flutter学习第六天:Flutter如何实现顶部导航,底部导航菜单,侧拉栏菜单等功能?

1.顶部导航

代码如下:

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: TabbedAppBarSample(),
  ));
}

class TabbedAppBarSample extends StatefulWidget {
  @override
  _TabbedAppBarSampleState createState() => _TabbedAppBarSampleState();
}


///顶部选择弹框
class _TabbedAppBarSampleState extends State<TabbedAppBarSample> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '顶部导航',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: DefaultTabController(
        length: choices.length,
        child: Scaffold(
          appBar: AppBar(
            title: const Text('Tabbed AppBar'),
            bottom: TabBar(
              isScrollable: true,
              tabs:choices.map((Choice choice){
                return Tab(
                  text: choice.title,
                  icon: Icon(choice.icon),
                );
              }).toList(),
            ),
          ),
          body: TabBarView(
            children: choices.map((Choice choice){
              return Padding(
                  padding:const EdgeInsets.all(16.0),
                  child: ChoiceCard(choice:choice) ,
              );
            }).toList(),
          ),
        ),
      ),
    );
  }
}

class Choice{
  final String title;
  final IconData icon;
  const Choice({
    this.title,
    this.icon,
  });
}


///初始化数据
const List<Choice> choices=const  <Choice>[
  const Choice(title: 'CAR',icon: Icons.directions_car),
  const Choice(title: 'BICYCLE', icon: Icons.directions_bike),
  const Choice(title: 'BOAT',icon: Icons.directions_boat),
  const Choice(title: 'BUS',icon: Icons.directions_bus),
  const Choice(title: 'TRAIN', icon: Icons.directions_railway),
  const Choice(title: 'WALK', icon: Icons.directions_walk),
];


///页面的内容
class ChoiceCard extends StatelessWidget{
  const ChoiceCard({Key key, this.choice}):super(key:key);
  final Choice choice;
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    final TextStyle textStyle=Theme.of(context).textTheme.display2;
    return Card(
      color: Colors.white,
      child: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.center,
          children:<Widget> [
            Icon(choice.icon,size: 128,color: textStyle.color,),
            Text(choice.title,style: textStyle,),
          ],
        ),
      ),
    );
  }
}
复制代码

效果:

2.底部导航菜单

HomePage,SearchPage,TravelPage,MyPage页面自行定义

import 'package:flutter/material.dart';
import 'package:home_app/HomePage.dart';
import 'package:home_app/MyPage.dart';
import 'package:home_app/SearchPage.dart';
import 'package:home_app/TravelPage.dart';


void main() {
  runApp(MaterialApp(
    home: TabNavigator(),
  ));
}

class TabNavigator extends StatefulWidget {
  @override
  _TabNavigatorState createState() => _TabNavigatorState();
}

class _TabNavigatorState extends State<TabNavigator> with SingleTickerProviderStateMixin {
  final _defaultColor=Colors.grey;
  final _activeColor=Colors.blue;
  int _currentIndex=0;
  var _controller=PageController(
    initialPage: 0,
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PageView(
        controller: _controller,
        children: <Widget>[HomePage(),SearchPage(),TravelPage(),MyPage()],
        physics: NeverScrollableScrollPhysics(),
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        onTap: (index){
          _controller.jumpToPage(index);
          setState(() {
            _currentIndex=index;
          });
        },
        type: BottomNavigationBarType.fixed,
        items: [
          BottomNavigationBarItem(
              icon:Icon(
                Icons.home,
                color: _defaultColor,
              ),
              activeIcon: Icon(
                Icons.home,
                color: _activeColor,
              ),
              title: Text(
                '首页',
                style: TextStyle(
                  color: _currentIndex !=0 ?_defaultColor:_activeColor),
                ),
              ),
          BottomNavigationBarItem(
            icon:Icon(
              Icons.search,
              color: _defaultColor,
            ),
            activeIcon: Icon(
              Icons.search,
              color: _activeColor,
            ),
            title: Text(
              '搜索',
              style: TextStyle(
                  color: _currentIndex !=1 ?_defaultColor:_activeColor),
            ),
          ),
          BottomNavigationBarItem(
            icon:Icon(
              Icons.camera_alt,
              color: _defaultColor,
            ),
            activeIcon: Icon(
              Icons.camera_alt,
              color: _activeColor,
            ),
            title: Text(
              '旅拍',
              style: TextStyle(
                  color: _currentIndex !=2 ?_defaultColor:_activeColor),
            ),
          ),
          BottomNavigationBarItem(
            icon:Icon(
              Icons.account_circle,
              color: _defaultColor,
            ),
            activeIcon: Icon(
              Icons.account_circle,
              color: _activeColor,
            ),
            title: Text(
              '我的',
              style: TextStyle(
                  color: _currentIndex !=3 ?_defaultColor:_activeColor),
            ),
          ),
        ],
      ),
    );
  }

  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
    _controller.dispose();
  }
}

复制代码

效果:

3.侧拉栏菜单功能

main.dart页面

import 'package:flutter/material.dart';
import 'package:home_app/TabNavigator.dart';
import 'package:home_app/TabbedAppBarSample.dart';

import 'MyHomePage.dart';

void main() {
  runApp(MaterialApp(
    home: MyApp(),
  ));
}

class MyApp extends StatelessWidget {
  final appTitle = 'Drawer Demo';
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: appTitle,
      home: MyHomePage(title: appTitle),
    );
  }
}
复制代码

MyHomePage页面

import 'package:flutter/material.dart';

class MyHomePage extends StatelessWidget {
  final String title;
  MyHomePage({Key key,this.title}) :super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(title),),
      body: Center(child: Text('My Page!'),),
      drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children:<Widget> [
            DrawerHeader(
                child: Text('Drawer Header'),
                decoration: BoxDecoration(
                  color: Colors.blue,
                ),
            ),
            ListTile(
              title: Text('Item 1'),
              onTap:(){
                Navigator.pop(context);
              },
            ),
            ListTile(
              title: Text('Item 2'),
              onTap: (){
                Navigator.pop(context);
              },
            )
          ],
        ),
      ),
    );
  }
}
复制代码

效果:

文章分类
Android
文章标签