thickness: 1,

        ),

        ListTile(

          leading: Icon(Icons.favorite),

          title: Text(

            'Active text overlay / 手指触摸导航项文本',

            textAlign: TextAlign.start,

            style: TextStyle(fontWeight: FontWeight.bold, fontSize: 10.0),

          ),

          onTap: () => null,

        ),

        ListTile(

          leading: Icon(Icons.favorite),

          title: Text(

            'InActive text overlay / 手指未触摸导航文本',

            textAlign: TextAlign.start,

            style: TextStyle(fontWeight: FontWeight.bold, fontSize: 10.0),

          ),

          onTap: () => null,

        ),

        Padding(

          padding: const EdgeInsets.all(16.0),

          child: Text(

            'Label/小标题',

          ),

        ),

      ],

    ),

  ),

  drawerScrimColor: Colors.blue.withOpacity(0.6),

);

}

}

抽屉导航类型

Standard navigation drawer / 标准导航抽屉

可以同时点击抽屉导航和屏幕内容。

用途：平板和台式机。

由于屏幕尺寸有限，它们不适合移动设备。

class _MyHomePageState extends State {

@override

Widget build(BuildContext context) {

return Row(

  children: [

    Drawer(

      child: ListView(

        // Important: Remove any padding from the ListView.

        padding: EdgeInsets.zero,

        children: <Widget>[

          Padding(

            padding: const EdgeInsets.all(16.0),

            child: Text(

              '标准导航_顶部',

              style: TextStyle(fontSize: 12.0),

            ),

          ),

          Divider(

            height: 1,

            thickness: 1,

          ),

          ListTile(

            leading: Icon(Icons.favorite),

            title: Text(

              '标准导航_选项一',

              style: TextStyle(fontSize: 10.0),

            ),

            selected: _selectedDestination == 0,

            onTap: () => selectDestination(0),

          ),

          ListTile(

            leading: Icon(Icons.delete),

            title: Text(

              '标准导航_选项二',

              style: TextStyle(fontSize: 10.0),

            ),

            selected: _selectedDestination == 1,

            onTap: () => selectDestination(1),

          ),

          ListTile(

            leading: Icon(Icons.label),

            title: Text(

              '标准导航_选项三',

              style: TextStyle(fontSize: 10.0),

            ),

            selected: _selectedDestination == 2,

            onTap: () => selectDestination(2),

          ),

          Divider(

            height: 1,

            thickness: 1,

          ),

        ],

      ),

    ),

    VerticalDivider(

      width: 1,

      thickness: 1,

    ),

    Expanded(

        child: Scaffold(

      appBar: AppBar(

        title: Text(widget.title),

      ),

      body: Center(

        child: Container(

            child: Text(

          '$_selectedDestination',

          style: TextStyle(fontSize: 22.0, fontWeight: FontWeight.bold),

        )),

      ),

    )),

  ],

);

}

int _selectedDestination = 0;

void selectDestination(int index) {

setState(() {

  _selectedDestination = index;

});

}

}

Modal navigation drawer / 模态导航抽屉

只可以点击导航栏，屏幕内容无法触摸

位于应用程序的UI之上，不会影响屏幕的布局。

 

​

class _MyHomePageState extends State {

@override

Widget build(BuildContext context) {

return Scaffold(

  appBar: AppBar(

    title: Text('Activity_PhoneWindow_DecorView'),

  ),

       drawer: Drawer(

         child: Center(

           child: Column(

             mainAxisAlignment: MainAxisAlignment.center,

             children: <Widget>[

               const Text('This is the Drawer'),

               ElevatedButton(

                 onPressed: null,

                 child: const Text('Close Drawer'),

               ),

             ],

           ),

         ),

       ),

  body: Center(

    child: Container(

      width: double.infinity,

      height: double.infinity,

      color: Colors.green,

      child: Column(

        crossAxisAlignment: CrossAxisAlignment.start,

        mainAxisAlignment: MainAxisAlignment.start,

        children: [

          _activity(),

          Container(

            padding: EdgeInsets.only(left: 10.0, top: 10.0),

            margin: EdgeInsets.all(

              20.0,

            ),

            color: Colors.orange,

            width: MediaQuery.of(context).size.width,

            height: MediaQuery.of(context).size.height - 200.0,

            child: Column(

              mainAxisAlignment: MainAxisAlignment.start,

              crossAxisAlignment: CrossAxisAlignment.start,

              children: [

                _phoneWindow(),

                _decorView(),

              ],

            ),

          ),

        ],

      ),

    ),

  ),

  //child: Text.rich(TextSpan(text: 'final InlineSpan textSpan / The text to display as a [InlineSpan]')),

);

}

Container _decorView() {

return Container(

  padding: EdgeInsets.only(left: 10.0, top: 10.0),

  margin: EdgeInsets.all(

    20.0,

  ),

  color: Colors.redAccent,

  width: MediaQuery.of(context).size.width - 80.0,

  height: MediaQuery.of(context).size.height - 300.0,

  child: Column(

    mainAxisAlignment: MainAxisAlignment.start,

    crossAxisAlignment: CrossAxisAlignment.start,

    children: [

      Text(

        'DecorView',

        style: TextStyle(

            fontSize: 20.0,

            fontWeight: FontWeight.bold,

            color: Colors.white),

      ),

      Container(

        width: double.infinity,

        padding: EdgeInsets.only(bottom: 10.0, top: 10.0),

        margin: EdgeInsets.only(left: 10.0, top: 10.0, right: 20.0),

        color: Colors.black.withOpacity(0.5),

        alignment: Alignment.center,

        child: Text(

          'TitleView',

          style: TextStyle(

              fontSize: 20.0,

              fontWeight: FontWeight.bold,

              color: Colors.white),

        ),

      ),

      Expanded(

        flex: 1,

        child: GestureDetector(

          onTap: () {

            Navigator.of(context).pushNamed('/TwoPage');

          },

          child: Container(

            width: double.infinity,

            padding: EdgeInsets.only(bottom: 10.0, top: 10.0),

            margin: EdgeInsets.only(

                left: 10.0, top: 10.0, right: 20.0, bottom: 20.0),

            color: Colors.black.withOpacity(0.5),

            alignment: Alignment.center,

            child: Text(

              'ContentView',

              style: TextStyle(

                  fontSize: 20.0,

                  fontWeight: FontWeight.bold,

                  color: Colors.white),

            ),

          ),

        ),

      ),

    ],

  ),

);

}

Text _phoneWindow() {

return Text(

  'PhoneWindow',

  style: TextStyle(

      fontSize: 20.0, fontWeight: FontWeight.bold, color: Colors.white),

);

}

Container _activity() {

return Container(

  padding: EdgeInsets.only(left: 10.0, top: 10.0),

  child: Text(

    'Activity',

    style: TextStyle(

        fontSize: 20.0, fontWeight: FontWeight.bold, color: Colors.white),

  ),

);

}

}

​

写在最后

在技术领域内，没有任何一门课程可以让你学完后一劳永逸，再好的课程也只能是“师傅领进门，修行靠个人”。“学无止境”这句话，在任何技术领域，都不只是良好的习惯，更是程序员和工程师们不被时代淘汰、获得更好机会和发展的必要前提。

如果你觉得自己学习效率低，缺乏正确的指导，可以一起学习交流！

加入我们吧！群内有许多来自一线的技术大牛，也有在小厂或外包公司奋斗的码农，我们致力打造一个平等，高质量的Android交流圈子，不一定能短期就让每个人的技术突飞猛进，但从长远来说，眼光，格局，长远发展的方向才是最重要的。

35岁中年危机大多是因为被短期的利益牵着走，过早压榨掉了价值，如果能一开始就树立一个正确的长远的职业规划。35岁后的你只会比周围的人更值钱。
《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门，即可获取！