Flutter12.Drawer侧滑

最新推荐文章于 2024-01-10 19:45:00 发布

原创最新推荐文章于 2024-01-10 19:45:00 发布 · 544 阅读

0 ·

CC 4.0 BY-SA版权

Flutter 专栏收录该内容

56 篇文章

订阅专栏

本文介绍如何在Flutter应用中实现底部导航栏和侧边抽屉功能，包括使用BottomNavigationBar和Drawer组件，以及如何通过路由进行页面跳转。文章详细展示了各个组件的配置和使用方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ex，抽取方法快捷键Ctrl + Alt + M:

import 'dart:math';

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'MaterialApp',
      routes: {'/other': (BuildContext context) => OtherPage()},
      initialRoute: '/other',
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int _currentIndex = 0;
  final _widgetOptions = [
    Text('信息'),
    Text('通讯录'),
    Text('发现'),
    Text('我'),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(//上面的title
        title: Text('MaterialApp示例'),
        centerTitle: true,//居中
        leading: Icon(Icons.star),//左边有个星星图案
        elevation: 10.0,//appBar的阴影
      ),
      body: Center(child: _widgetOptions.elementAt(_currentIndex)),//body根据不同的控件显示不同的状态,居中布局
      floatingActionButton: FloatingActionButton(//悬浮的按钮
        onPressed: () {
          Navigator.pushNamed(context, '/other');
        },
        tooltip: '路由跳转',
        foregroundColor: Color(0xffffffff),
        backgroundColor: Color(0xff000000),
        //阴影
        elevation: 0.0,
        child: Icon(Icons.arrow_forward),
//        shape: RoundedRectangleBorder(),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,//位置
      bottomNavigationBar: BottomNavigationBar(//底部导航栏
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.message),
            title: Text('信息'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.contacts),
            title: Text('通讯录'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.near_me),
            title: Text('发现'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.account_circle),
            title: Text('我'),
          ),
        ],
        currentIndex: _currentIndex,
        type: BottomNavigationBarType.fixed,//设置位置固定
        onTap: (index) {
          setState(() {//控制刷新
            _currentIndex = index;
          });
        },
      ),
      drawer: _buildDrawer(),
    );
  }

  //Drawer方法抽取出来  Ctrl + Alt + M
  Drawer _buildDrawer() {
    return Drawer(//左边的Drawer抽屉
//        elevation: 0.0,
    child: ListView(
      children: <Widget>[
        UserAccountsDrawerHeader(
          currentAccountPicture: CircleAvatar(
            backgroundImage: NetworkImage('https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png'),
          ),
          accountName: Text('demo'),
          accountEmail: Text('augfun@outlook.com'),
          otherAccountsPictures: <Widget>[
            Icon(Icons.camera_alt),
          ],
          decoration: BoxDecoration(//装饰
            image: DecorationImage(
              image: AssetImage('assets/images/bg1.png'),//设置背景图片
              fit: BoxFit.fill,//平铺图片
            ),
          ),
        ),
        ListTile(
          leading: Icon(Icons.payment),
          title: Text('My Account'),
        ),
        ListTile(
          leading: Icon(Icons.payment),
          title: Text('My Account'),
        ),
        ListTile(
          leading: Icon(Icons.payment),
          title: Text('My Account'),
        ),
        AboutListTile(
          icon: Icon(Icons.error),
          child: Text('About'),
          applicationName: 'Text demo',
          applicationVersion: '1.0',
        ),
      ],
    ),
    );
  }
}

class OtherPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('OtherPage'),
      ),
    );
  }
}

输出：