(五)Flutter 界面结构 tab appbar bottomNavigationBar drawer

版权声明：独学而无友，则孤陋寡闻。q群582951247 https://blog.csdn.net/mp624183768/article/details/84973628

上节课程的内容 都写在了一起 为了解耦 我们可以把他们单独提取出来一个类

lib 下新建demo/listview_demo.dart文件

内容如下

import 'package:flutter/material.dart';
import 'package:nihao_flutter/model/post.dart';

class ListViewDemo extends StatelessWidget{
  Widget _listItemBuilder(BuildContext context,int index){
    return Container(
      color: Colors.white,
      margin: EdgeInsets.all(8.0),
      child: Column(
        children: <Widget>[
          Image.network(posts[index].imgeUrl),
          SizedBox(height: 16.0), 
          Text(
            posts[index].title,
            style: Theme.of(context).textTheme.title,
          ),
          Text(
            posts[index].author,
            style: Theme.of(context).textTheme.subhead,
          ),
           SizedBox(height: 16.0), 
        ],
      ),
    );
  }
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView.builder(
          itemCount:posts.length,
          itemBuilder: _listItemBuilder,
        );
  }

}

lib 下新建demo/hello_demo.dart文件

虽然这个文件没啥用 但是一家人就得整整齐齐的

import 'package:flutter/material.dart';

class Hello extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
    child: Text(
     'Hello1111',
     textDirection: TextDirection.ltr,
     style: TextStyle(
       fontSize: 40.0,
       fontWeight: FontWeight.bold,
       color: Colors.black87
     ),
      ),
  
  );
  }

}

test/widget_test.dart老报错  说没有MyApp  真是怕了你了 把app 改成MyApp

每次app运行上面都有一个debug 可以去掉的

      debugShowCheckedModeBanner: false,

import 'package:flutter/material.dart';
import 'package:nihao_flutter/demo/listview_demo.dart';



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



class MyApp extends StatelessWidget{ 
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Home(),
      theme: ThemeData(
        primarySwatch: Colors.yellow
      ),
    );
  }
  
}


  
class Home extends StatelessWidget{
  
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      backgroundColor: Colors.grey[100],
        appBar: AppBar(
          title: Text('app Bar'),
          // 阴影
          elevation: 0.0,
        ),
        body: ListViewDemo()
      );
  }

}

内容和上节一样 但是更方便以后的修改和开发了

so

继续本节课内容

AppBar:工具栏上的图标按钮（IconButton）

控制台打印

()=>debugPrint('search Button is pressed.')

整体代码如下

import 'package:flutter/material.dart';
import 'package:nihao_flutter/demo/listview_demo.dart';



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



class MyApp extends StatelessWidget{ 
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Home(),
      theme: ThemeData(
        primarySwatch: Colors.yellow
      ),
    );
  }
  
}


  
class Home extends StatelessWidget{
  
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      backgroundColor: Colors.grey[100],
        appBar: AppBar(
          leading: IconButton(
            icon: Icon(Icons.menu),
            tooltip: 'Navigration',
            onPressed: ()=>debugPrint('Navigration Button is pressed.'),
          ),
          title: Text('app Bar'),
          actions: <Widget>[
            IconButton(
            icon: Icon(Icons.search),
            tooltip: 'Search',
            onPressed: ()=>debugPrint('search Button is pressed.'),
          ),
          ],
          // 阴影
          elevation: 0.0,
        ),
        body: null
      );
  }

}

android 叫做TabLayout Flutter 叫做TabBar :用标签形式展示内容

具体代码如下

import 'package:flutter/material.dart';
import 'package:nihao_flutter/demo/listview_demo.dart';



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



class MyApp extends StatelessWidget{ 
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Home(),
      theme: ThemeData(
        primarySwatch: Colors.yellow
      ),
    );
  }
  
}


  
class Home extends StatelessWidget{
  
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return DefaultTabController(
      length: 3,
      child: Scaffold(
      backgroundColor: Colors.grey[100],
        appBar: AppBar(
          leading: IconButton(
            icon: Icon(Icons.menu),
            tooltip: 'Navigration',
            onPressed: ()=>debugPrint('Navigration Button is pressed.'),
          ),
          title: Text('app Bar'),
          actions: <Widget>[
            IconButton(
            icon: Icon(Icons.search),
            tooltip: 'Search',
            onPressed: ()=>debugPrint('search Button is pressed.'),
          ),
          ],
          // 阴影
          elevation: 0.0,
          bottom: TabBar(
            tabs: <Widget>[
              Tab(icon: Icon(Icons.local_florist)),
              Tab(icon: Icon(Icons.change_history)),
              Tab(icon: Icon(Icons.directions_bike)),
            ],
          ),
        ),
        body: TabBarView(children: <Widget>[
          Icon(Icons.local_florist,size: 128.0,color: Colors.black12),
          Icon(Icons.change_history,size: 128.0,color: Colors.black12),
          Icon(Icons.directions_bike,size: 128.0,color: Colors.black12),
        ],)
      ),
    );
  }

}

在设置下点击状态

 bottom: TabBar(
            unselectedLabelColor: Colors.black38,
            indicatorColor: Colors.black54,
            indicatorSize: TabBarIndicatorSize.label,
            indicatorWeight:1.0 ,
            tabs: <Widget>[
              Tab(icon: Icon(Icons.local_florist)),
              Tab(icon: Icon(Icons.change_history)),
              Tab(icon: Icon(Icons.directions_bike)),
            ],

对tab增加水波纹效果

class MyApp extends StatelessWidget{ 
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Home(),
      theme: ThemeData(
        primarySwatch: Colors.yellow,
        highlightColor: Color.fromRGBO(255, 255, 255, 0.5),
        splashColor: Colors.white70
      ),
    );
  }
  
}

现在具体源码如下

import 'package:flutter/material.dart';
import 'package:nihao_flutter/demo/listview_demo.dart';



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



class MyApp extends StatelessWidget{ 
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Home(),
      theme: ThemeData(
        primarySwatch: Colors.yellow,
        highlightColor: Color.fromRGBO(255, 255, 255, 0.5),
        splashColor: Colors.white70
      ),
    );
  }
  
}


  
class Home extends StatelessWidget{
  
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return DefaultTabController(
      length: 3,
      child: Scaffold(
      backgroundColor: Colors.grey[100],
        appBar: AppBar(
          leading: IconButton(
            icon: Icon(Icons.menu),
            tooltip: 'Navigration',
            onPressed: ()=>debugPrint('Navigration Button is pressed.'),
          ),
          title: Text('app Bar'),
          actions: <Widget>[
            IconButton(
            icon: Icon(Icons.search),
            tooltip: 'Search',
            onPressed: ()=>debugPrint('search Button is pressed.'),
          ),
          ],
          // 阴影
          elevation: 0.0,
          bottom: TabBar(
            unselectedLabelColor: Colors.black38,
            indicatorColor: Colors.black54,
            indicatorSize: TabBarIndicatorSize.label,
            indicatorWeight:1.0 ,
            tabs: <Widget>[
              Tab(icon: Icon(Icons.local_florist)),
              Tab(icon: Icon(Icons.change_history)),
              Tab(icon: Icon(Icons.directions_bike)),
            ],
          ),
        ),
        body: TabBarView(children: <Widget>[
          Icon(Icons.local_florist,size: 128.0,color: Colors.black12),
          Icon(Icons.change_history,size: 128.0,color: Colors.black12),
          Icon(Icons.directions_bike,size: 128.0,color: Colors.black12),
        ],)
      ),
    );
  }

}

Flutter Drawer 抽屉（侧边栏）

从左到右边就是

drwer:widget

从右边到左边就是

endDrawer:widget

先写一个简单的drawer 不写动作 直接从左往右即可滑动出现

import 'package:flutter/material.dart';
import 'package:nihao_flutter/demo/listview_demo.dart';



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



class MyApp extends StatelessWidget{ 
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Home(),
      theme: ThemeData(
        primarySwatch: Colors.yellow,
        highlightColor: Color.fromRGBO(255, 255, 255, 0.5),
        splashColor: Colors.white70
      ),
    );
  }
  
}


  
class Home extends StatelessWidget{
  
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return DefaultTabController(
      length: 3,
      child: Scaffold(
      backgroundColor: Colors.grey[100],
        appBar: AppBar(
          leading: IconButton(
            icon: Icon(Icons.menu),
            tooltip: 'Navigration',
            onPressed: ()=>debugPrint('Navigration Button is pressed.'),
          ),
          title: Text('app Bar'),
          actions: <Widget>[
            IconButton(
            icon: Icon(Icons.search),
            tooltip: 'Search',
            onPressed: ()=>debugPrint('search Button is pressed.'),
          ),
          ],
          // 阴影
          elevation: 0.0,
          bottom: TabBar(
            unselectedLabelColor: Colors.black38,
            indicatorColor: Colors.black54,
            indicatorSize: TabBarIndicatorSize.label,
            indicatorWeight:1.0 ,
            tabs: <Widget>[
              Tab(icon: Icon(Icons.local_florist)),
              Tab(icon: Icon(Icons.change_history)),
              Tab(icon: Icon(Icons.directions_bike)),
            ],
          ),
        ),
        body: TabBarView(children: <Widget>[
          Icon(Icons.local_florist,size: 128.0,color: Colors.black12),
          Icon(Icons.change_history,size: 128.0,color: Colors.black12),
          Icon(Icons.directions_bike,size: 128.0,color: Colors.black12),
        ],),
      drawer: Container(
        color: Colors.white,
        padding: EdgeInsets.all(8.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('This is Drawer')
          ],
        ),
      ),
      ),
    );
  }

}

稍微规范一点

import 'package:flutter/material.dart';
import 'package:nihao_flutter/demo/listview_demo.dart';



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



class MyApp extends StatelessWidget{ 
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Home(),
      theme: ThemeData(
        primarySwatch: Colors.yellow,
        highlightColor: Color.fromRGBO(255, 255, 255, 0.5),
        splashColor: Colors.white70
      ),
    );
  }
  
}


  
class Home extends StatelessWidget{
  
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return DefaultTabController(
      length: 3,
      child: Scaffold(
      backgroundColor: Colors.grey[100],
        appBar: AppBar(
          leading: IconButton(
            icon: Icon(Icons.menu),
            tooltip: 'Navigration',
            onPressed: ()=>debugPrint('Navigration Button is pressed.'),
          ),
          title: Text('app Bar'),
          actions: <Widget>[
            IconButton(
            icon: Icon(Icons.search),
            tooltip: 'Search',
            onPressed: ()=>debugPrint('search Button is pressed.'),
          ),
          ],
          // 阴影
          elevation: 0.0,
          bottom: TabBar(
            unselectedLabelColor: Colors.black38,
            indicatorColor: Colors.black54,
            indicatorSize: TabBarIndicatorSize.label,
            indicatorWeight:1.0 ,
            tabs: <Widget>[
              Tab(icon: Icon(Icons.local_florist)),
              Tab(icon: Icon(Icons.change_history)),
              Tab(icon: Icon(Icons.directions_bike)),
            ],
          ),
        ),
        body: TabBarView(children: <Widget>[
          Icon(Icons.local_florist,size: 128.0,color: Colors.black12),
          Icon(Icons.change_history,size: 128.0,color: Colors.black12),
          Icon(Icons.directions_bike,size: 128.0,color: Colors.black12),
        ],),
      drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: <Widget>[
            DrawerHeader(
              child: Text('header'.toUpperCase()),
              decoration: BoxDecoration(
                color: Colors.grey[100]
              )
            ),
ListTile(
  title: Text(
    'Messages',
    textAlign:TextAlign.right  
  ),
  trailing: Icon(Icons.message,color:Colors.black12,size:22.0),
),
ListTile(
  title: Text(
    'Favorite',
    textAlign:TextAlign.right  
  ),
  trailing: Icon(Icons.favorite,color:Colors.black12,size:22.0),
),
ListTile(
  title: Text(
    'Settings',
    textAlign:TextAlign.right  
  ),
  trailing: Icon(Icons.settings,color:Colors.black12,size:22.0),
),

          ],
        ),

      )
      ),
    );
  }

}

提取出来Drawer小空间 到lib/demo/drawer_demo.dart

import 'package:flutter/material.dart';
class DrawerDemo extends StatelessWidget{
  @override
    Widget build(BuildContext context) {
      // TODO: implement build
      return Drawer(
            child: ListView(
              padding: EdgeInsets.zero,
              children: <Widget>[
               UserAccountsDrawerHeader(
                 accountName: Text(
                   'liuan',
                   style:TextStyle(fontWeight:FontWeight.bold)
                   ),
                   accountEmail: Text('[email protected]'),
                   currentAccountPicture: CircleAvatar(
                     backgroundImage: NetworkImage("https://qlogo3.store.qq.com/qzone/1377093782/1377093782/100?1517837561"),
                   ),
                   decoration: BoxDecoration(
                     color: Colors.yellow[400],
                     image: DecorationImage(
                       image: NetworkImage("https://b17.photo.store.qq.com/psb?/V12afHjz3YxmJJ/wsSH2RiAY5hw.wpvEsjHmXdBttWDcJGcbjdvPUNrPZc!/b/dBEAAAAAAAAA&bo=QAZZCEAGWQgRIBc!&rf=viewer_311"),
                       fit: BoxFit.cover,
                       colorFilter: ColorFilter.mode(Colors.yellow[400], BlendMode.hardLight)
                     )
                   ),
               ),
                ListTile(
                  title: Text('Messages', textAlign: TextAlign.right),
                  trailing:
                      Icon(Icons.message, color: Colors.black12, size: 22.0),
                ),
                ListTile(
                  title: Text('Favorite', textAlign: TextAlign.right),
                  trailing:
                      Icon(Icons.favorite, color: Colors.black12, size: 22.0),
                ),
                ListTile(
                  title: Text('Settings', textAlign: TextAlign.right),
                  trailing:
                      Icon(Icons.settings, color: Colors.black12, size: 22.0),
                ),
              ],
            ),
          );
    }
}

主页代码如下

import 'package:flutter/material.dart';
import 'package:nihao_flutter/demo/drawer_demo.dart';
import 'package:nihao_flutter/demo/listview_demo.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Home(),
      theme: ThemeData(
          primarySwatch: Colors.yellow,
          highlightColor: Color.fromRGBO(255, 255, 255, 0.5),
          splashColor: Colors.white70),
    );
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return DefaultTabController(
      length: 3,
      child: Scaffold(
          backgroundColor: Colors.grey[100],
          appBar: AppBar(
            leading: IconButton(
              icon: Icon(Icons.menu),
              tooltip: 'Navigration',
              onPressed: () => debugPrint('Navigration Button is pressed.'),
            ),
            title: Text('app Bar'),
            actions: <Widget>[
              IconButton(
                icon: Icon(Icons.search),
                tooltip: 'Search',
                onPressed: () => debugPrint('search Button is pressed.'),
              ),
            ],
            // 阴影
            elevation: 0.0,
            bottom: TabBar(
              unselectedLabelColor: Colors.black38,
              indicatorColor: Colors.black54,
              indicatorSize: TabBarIndicatorSize.label,
              indicatorWeight: 1.0,
              tabs: <Widget>[
                Tab(icon: Icon(Icons.local_florist)),
                Tab(icon: Icon(Icons.change_history)),
                Tab(icon: Icon(Icons.directions_bike)),
              ],
            ),
          ),
          body: TabBarView(
            children: <Widget>[
              Icon(Icons.local_florist, size: 128.0, color: Colors.black12),
              Icon(Icons.change_history, size: 128.0, color: Colors.black12),
              Icon(Icons.directions_bike, size: 128.0, color: Colors.black12),
            ],
          ),
          drawer: DrawerDemo()),
    );
  }
}

demo 下新建bottom_navigation_bar_demo.dart

import 'package:flutter/material.dart';
class BottomNavigationBarDemo extends StatefulWidget{
  @override
    State<StatefulWidget> createState() {
      // TODO: implement createState
      return _BottomNavigationBarDemoState();
                }
            
          
      }
      
      class _BottomNavigationBarDemoState extends State<BottomNavigationBarDemo>{
          int _currentIndex=0;
  void _onTapHandler(int index){
    setState((){
      _currentIndex=index;
    });
  }
        @override
          Widget build(BuildContext context) {
            // TODO: implement build
            return BottomNavigationBar(
            currentIndex:_currentIndex,
            onTap: _onTapHandler,
            type: BottomNavigationBarType.fixed,
            fixedColor: Colors.black,
            items: [
              BottomNavigationBarItem(
                icon: Icon(Icons.explore),
                title: Text('Explore')
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.history),
                title: Text('History')
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.list),
                title: Text('List')
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.person),
                title: Text('My')
              ),
            ],
          );
          }

}

main.dart

import 'package:flutter/material.dart';
import 'package:nihao_flutter/demo/bottom_navigation_bar_demo.dart';
import 'package:nihao_flutter/demo/drawer_demo.dart';
import 'package:nihao_flutter/demo/listview_demo.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Home(),
      theme: ThemeData(
          primarySwatch: Colors.yellow,
          highlightColor: Color.fromRGBO(255, 255, 255, 0.5),
          splashColor: Colors.white70),
    );
  }
}

class Home extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return DefaultTabController(
      length: 3,
      child: Scaffold(
          backgroundColor: Colors.grey[100],
          appBar: AppBar(
            leading: IconButton(
              icon: Icon(Icons.menu),
              tooltip: 'Navigration',
              onPressed: () => debugPrint('Navigration Button is pressed.'),
            ),
            title: Text('app Bar'),
            actions: <Widget>[
              IconButton(
                icon: Icon(Icons.search),
                tooltip: 'Search',
                onPressed: () => debugPrint('search Button is pressed.'),
              ),
            ],
            // 阴影
            elevation: 0.0,
            bottom: TabBar(
              unselectedLabelColor: Colors.black38,
              indicatorColor: Colors.black54,
              indicatorSize: TabBarIndicatorSize.label,
              indicatorWeight: 1.0,
              tabs: <Widget>[
                Tab(icon: Icon(Icons.local_florist)),
                Tab(icon: Icon(Icons.change_history)),
                Tab(icon: Icon(Icons.directions_bike)),
              ],
            ),
          ),
          body: TabBarView(
            children: <Widget>[
              ListViewDemo(),
              Icon(Icons.change_history, size: 128.0, color: Colors.black12),
              Icon(Icons.directions_bike, size: 128.0, color: Colors.black12),
            ],
          ),
          drawer: DrawerDemo(),
          bottomNavigationBar: BottomNavigationBarDemo(),
          
          ),
    );
  }
}

Flutter 底部导航栏

BottomNavigationBar也完成了