视频直播系统源码,Flutter12.Drawer侧滑相关的代码

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'),
      ),
    );
  }
}

以上就是视频直播系统源码,Flutter12.Drawer侧滑相关的代码, 更多内容欢迎关注之后的文章

Logo

开源鸿蒙跨平台开发社区汇聚开发者与厂商,共建“一次开发,多端部署”的开源生态,致力于降低跨端开发门槛,推动万物智联创新。

更多推荐