[移动开发] Flutter-基础第二篇

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> 移动开发 -> Flutter-基础第二篇 -> 正文阅读

[移动开发]Flutter-基础第二篇

Flutter目录介绍
一、目录结构介绍
在这里插入图片描述
二、Flutter 入口文件、入口方法

// main.dart
void main(){ 
    runApp(MyApp());
}

// 也可以简写
void main() => runApp(MyApp());
/*每一个 flutter 项目的 lib 目录里面都有一个 main.dart 这个文件就是 flutter 的入口文件
    其中的 main 方法是 dart 的入口方法
    runApp 方法是 flutter 的入口方法。
    MyApp 是自定义的一个组件
*/

三、把内容单独抽离成一个组件
在 Flutter 中自定义组件其实就是一个类，这个类需要继承 StatelessWidget \ StatefulWidget

组件	描述
StatelessWidget	无状态组件，状态不可变的 widget
StatefulWidget	有状态组件，持有的状态可能在 widget 生命周期改变

四、代码示例

1.输入快捷键fim导入工具包
2.在main函数中调用自定义组件
3.在自定义组件中MaterialApp可以理解为根组件，MaterialApp的构造方法中的每一个参数都是可以省略的，但是官方还是要求[home] ,[routes][onGenerateRoute]这三个参数至少要填写一个
4.body中调用自定义组件，Center是一个布局组件

示例1

import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('data'),
        ),
        body: HomeContent(),
      ),
    );
  }
}
class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Center(
      child: new Text(
        '你好可可',
        textDirection: TextDirection.ltr,
        style: TextStyle(fontSize: 30.0, color: Colors.pink),
      ),
    );
  }
}

示例2

import 'package:flutter/material.dart';

main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: Text('标题'),
          ),
          body: HomeContent()),
    );
  }
}

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        child: Text(
          '我是一个文本',
          textAlign: TextAlign.center,//文本属性
          style: TextStyle(fontSize: 16.0,//文本样式
          color: Color.fromARGB(255, 255, 255, 255),
          fontWeight: FontWeight.w800,//字体粗细
          fontStyle: FontStyle.italic,//字体样式
          decoration: TextDecoration.lineThrough,//装饰
          decorationColor: Colors.red,//装饰颜色
          decorationStyle: TextDecorationStyle.dashed,
          letterSpacing: 5.0
          ),
          overflow: TextOverflow.ellipsis,
          maxLines: 1,
          textScaleFactor: 2,
        ),
        height: 300.0,
        width: 300.0,
        decoration: BoxDecoration(
          color: Colors.pink,
          border: Border.all(//设置边框
            color: Colors.blue,
            width: 2.0
          ),
          borderRadius: BorderRadius.all(
            Radius.circular(10)//设置圆角
          )
        ),
        padding: EdgeInsets.all(10),
        margin: EdgeInsets.fromLTRB(10, 10, 10, 0),
        // transform: Matrix4.translationValues(100, 100, 0),
        transform: Matrix4.rotationX(10),
        alignment: Alignment.bottomRight,
      ),
    );
  }
}

MaterialApp 主要属性如下

属性	描述
title ：	在任务管理窗口中所显示的应用名字
theme ：	应用各种 UI 所使用的主题颜色
color ：	应用的主要颜色值（primary color），也就是安卓任务管理窗口中所显示的应用颜色
home ：	应用默认所显示的界面 Widget
routes ：	应用的顶级导航表格，这个是多页面应用用来控制页面跳转的，类似于网页的网址
initialRoute ：	第一个显示的路由名字，默认值为 Navigator.defaultRouteName
onGenerateRoute ：	生成路由的回调函数，当导航的命名路由的时候，会使用这个来生成界面
onLocaleChanged ：	当系统修改语言的时候，会触发这个回调
navigatorObservers ：	应用 Navigator 的监听器
debugShowMaterialGrid ：	是否显示纸墨设计基础布局网格，用来调试 UI 的工具
showPerformanceOverlay ：	显示性能标签
debugShowCheckedModeBanner ：	是否显示右上角DEBUG标签（调试开关）
checkerboardRasterCacheImages ：	检查缓存的图像开关，检测在界面重绘时频繁闪烁的图像（调试开关）
showSemanticsDebugger ：	是否打开Widget边框，类似Android开发者模式中显示布局边界（调试开关）

Scaffold组件常见属性如表所示

属性	说明	描述
appBar	AppBar	显示在界面顶部的一个 AppBar
body	Widget	当前界面所显示的主要内容
floatingActionButton	Widget	在 MaterialDesign 中定义的一个功能按钮
persistentFooterButtons	List	固定在下方显示的按钮
drawer	Widget	侧边栏组件
bottomNavigationBar	Widget	显示在底部的导航栏按钮栏
backgroundColor	Color	背景颜色
resizeToAvoidBottomPadding	bool	控制界面内容 body 是否重新布局来避免底部被覆盖，比如当键盘显示

AppBar 及 SliverAppBar 组件常见属性见表：

属性	类型	默认值	说明
leading	Widget	null	在标题前面显示的一个组件，在首页通常显示应用的 logo; 在其他界面通常显示为返回按钮
title	Widget	null	Toolbar 中主要内容，通常显示为当前界面的标题文字
actions	List	null	一个 Widget列表，代表 Toolbar中所显示的菜单，对于常用的菜单，通常使用 conButton 来表示，对于不常用的菜单通常使用 Popup- MenuButton j来显示为三个点，点击后弹出二级菜单
bottom PreferredSize	Widget	null	通常是 TabBar。用来在 Toolbar 标题下面显示一个 Tab 导航栏
elevation	double	4	纸墨设计中组件的 z 坐标顺序，对于可滚动的 SliverAppBar，当 SliverAppBar和内容同级的时候，该值为 0，当内容滚动 SliverAppBar变为 Toolbar的时候，修改 elevatio口的值
flexibleSpace	Widget	null	一个显示在 AppBar下方的组件，高度和 AppBar 高度一样，可以实现一些特殊的效果，该属性通常’在 SliverAppBar 中使用
brightness	Brightness	ThemeData. primaryColorBrightness	AppBar 的亮度，有白色和黑色两种主题
backgroundColor	Color	ThemeData. primaryColor	背景色
iconTheme	IconThemeData	ThemeData primaryIconTheme	AppBar 上图标的颜色、透明度和尺寸信息。默认值为 ThemeData.primaryIconTheme
textTheme	TextTheme	Them巳Data. primaryTextTheme	AppBar上的文字样式
centerTitle	bool	true	标题是否居中显示，默认值根据不同的操作系统，显示方式不一样

图片的使用

import 'package:flutter/material.dart';

main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: Text('标题'),
          ),
          body: HomeContent()),
    );
  }
}

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        child: Image.network(
          "https://img-blog.csdnimg.cn/07bec00ef4d54b66a856ca14f222001b.png",
          alignment: Alignment.bottomRight,
          fit: BoxFit.cover,
          color: Colors.pink,
        ),
        height: 300.0,
        width: 300.0,
        decoration: BoxDecoration(
          color: Colors.pink,
          border: Border.all(
            color: Colors.blue,
            width: 2.0
          ),
          borderRadius: BorderRadius.all(
            Radius.circular(10)
          ),
          image: DecorationImage(
            image: NetworkImage("https://img-blog.csdnimg.cn/07bec00ef4d54b66a856ca14f222001b.png"),
            fit: BoxFit.cover
          )
        ),
        padding: EdgeInsets.all(10),
        margin: EdgeInsets.fromLTRB(10, 10, 10, 0),
        // transform: Matrix4.translationValues(100, 100, 0),
        transform: Matrix4.rotationX(10),
        alignment: Alignment.bottomRight,
      ),
    );
  }
}

ClipOval可以用来裁剪圆形或者椭圆，ClipOval的定义跟ClipRect一样，只不过是ClipRect裁剪出来的是矩形。ClipOval也接受一个Rect参数作为裁剪局域，它将会以给定的Rect的中心为圆心来裁剪圆，如果Rect长宽一样那么裁剪出来的就是个圆形，相反会裁剪出一个椭圆。ClipOval的定义如下：

import 'package:flutter/material.dart';
main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: Text('标题'),
          ),
          body: HomeContent()),
    );
  }
}

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        child: ClipOval(
            child: Image.network(
                "https://img-blog.csdnimg.cn/07bec00ef4d54b66a856ca14f222001b.png",
            height:100,
            width:100,
            fit: BoxFit.cover),
        )
      ),
    );
  }
}

在这里插入图片描述

ListView

import 'package:flutter/material.dart';
main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: Text('标题'),
          ),
          body: HomeContent()),
    );
  }
}

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: <Widget>[
        ListTile(
          leading: Icon(Icons.home,color: Colors.pink,),
          title: Text('后感觉还是工程技术都很乖'),
          subtitle: Text('data'),
        ),
        ListTile(
          leading: Icon(Icons.search),//前面的icon
          title: Text('后感觉还是工程技术都很乖'),//标题
          subtitle: Text('data'),//副标题
        )
      ],
    );
  }
}

在这里插入图片描述

import 'package:flutter/material.dart';

main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: Text('标题'),
          ),
          body: HomeContent()),
    );
  }
}

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: <Widget>[
        Image.network(
            "https://img-blog.csdnimg.cn/07bec00ef4d54b66a856ca14f222001b.png"),
            Container(
             child: Text('我是一个标题',
             textAlign: TextAlign.center,
             style: TextStyle(
               fontSize: 28
             ),
             ),
            height: 60,
            padding: EdgeInsets.fromLTRB(0, 10, 0, 10),
            decoration: BoxDecoration(
              color: Colors.pink
            ),
            ),
        Image.network(
            "https://img-blog.csdnimg.cn/07bec00ef4d54b66a856ca14f222001b.png"),
        Image.network(
            "https://img-blog.csdnimg.cn/07bec00ef4d54b66a856ca14f222001b.png")
        // ListTile(
        //   leading: Icon(Icons.home,color: Colors.pink,),
        //   title: Text('后感觉还是工程技术都很乖'),
        //   subtitle: Text('data'),
        // ),
        // ListTile(
        //   leading: Icon(Icons.search),
        //   title: Text('后感觉还是工程技术都很乖'),
        //   subtitle: Text('data'),
        // )
      ],
    );
  }
}

ListView水平布局

import 'package:flutter/material.dart';

main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: Text('标题'),
          ),
          body: HomeContent()),
    );
  }
}

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 180,
      child: ListView(
      scrollDirection: Axis.horizontal,
      children: <Widget>[
        Container(
          width: 180,
          height: 180,
          color: Colors.orange,
          child:ListView(
            children: <Widget>[
            Image.network('https://img-blog.csdnimg.cn/07bec00ef4d54b66a856ca14f222001b.png',
            ),
            Container(
              child: Text('jbj'),
            )
            ],
          )
        ),
             Container(
          width: 180,
          height: 180,
          color: Colors.indigoAccent,
        ),
             Container(
          width: 180,
          height: 180,
          color: Colors.lightGreen,
        )
      ],
    ),
    );
  }
}

循环列表中的信息展示到ListView组件上

import 'package:flutter/material.dart';
main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: Text('标题'),
          ),
          body: HomeContent()),
    );
  }
}
class HomeContent extends StatelessWidget {
  List<Widget> _getData() {
    List<Widget> list = List();
    for (var i = 0; i < 20; i++) {
      list.add(ListTile(
        title: Text("我是列表$i"),
      ));
    }
    return list;
  }
  @override
  Widget build(BuildContext context) {
    return ListView(children: this._getData());
  }
}

抽离出内容调用方法使用

import 'package:flutter/material.dart';
import 'package:myflutter/listData.dart';
main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: Text('标题'),
          ),
          body: HomeContent()),
    );
  }
}
class HomeContent extends StatelessWidget {
  List<Widget> _getData() {
    var tempList = listData.map((value){
      return ListTile(
        leading: Image.network(value["imagesUrl"]),
        title: Text(value["title"])
      );
    });
    return tempList.toList();
  }

  @override
  Widget build(BuildContext context) {
    return ListView(children: this._getData());
  }
}

import 'package:flutter/material.dart';
import 'package:myflutter/listData.dart';
main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: Text('标题'),
          ),
          body: HomeContent()),
    );
  }
}
class HomeContent extends StatelessWidget {
  List<Widget> _getData() {
    var tempList = listData.map((value){
      return ListTile(
        leading: Image.network(value["imagesUrl"]),
        title: Text(value["title"])
      );
    });
    return tempList.toList();
  }

  @override
  Widget build(BuildContext context) {
    return ListView(children: this._getData());
  }
}

import 'package:flutter/material.dart';
import 'package:myflutter/listData.dart';
main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: Text('标题'),
          ),
          body: HomeContent()),
    );
  }
}
class HomeContent extends StatelessWidget {
List list = new List();
HomeContent(){
  for(var i =0;i<29;i++){
    this.list.add("value $i");
  }
}
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: this.list.length,
      itemBuilder: (context,index){
        return ListTile(
          title: Text(this.list[index]),
        );
      },
    );
  }
}

import 'package:flutter/material.dart';
import 'package:myflutter/listData.dart';

main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: Text('标题'),
          ),
          body: HomeContent()),
    );
  }
}

class HomeContent extends StatelessWidget {
  List list = new List();
//自定义方法
  Widget _getListData(context, index) {
    return ListTile(
      title: Text(this.list[index]["title"]),
    );
  }

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
        itemCount: this.list.length, itemBuilder: this._getListData);
  }
}

Gridview网格布局

import 'package:flutter/material.dart';

main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('day_2',
              textDirection: TextDirection.ltr,
              style: TextStyle(fontSize: 10, color: Colors.purpleAccent),
              textAlign: TextAlign.center,
              maxLines: 1),
        ),
        body: HomeContent(),
      ),
    );
  }
}

class HomeContent extends StatelessWidget {
  List<Widget> _getListData() {
    List<Widget> list = List();
    for (var i = 0; i < 20; i++) {
      list.add(Container(
        child: Text("这是第$i条数据"),
        color: Colors.blue,
        alignment: Alignment.center,
      ));
    }
    return list.toList();
  }

  @override
  Widget build(BuildContext context) {
    return GridView.count(
      padding: EdgeInsets.all(10),

        crossAxisCount: 2, //一行多少个组件
        mainAxisSpacing: 10,
        crossAxisSpacing: 10,
        childAspectRatio: 0.7,//宽度和高度的比例是0.7
        children: this._getListData()
    );
  }
}

静态网格布局

import 'package:flutter/material.dart';

main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('day_2',
              textDirection: TextDirection.ltr,
              style: TextStyle(fontSize: 10, color: Colors.purpleAccent),
              textAlign: TextAlign.center,
              maxLines: 1),
        ),
        body: HomeContent(),
      ),
    );
  }
}

class HomeContent extends StatelessWidget {
  List<Widget> _getListData() {
    List listData = [
      {
        "title": 'Candy Shop',
        "author": "Mohamed",
        "imagesUrl":
            "https://img-blog.csdnimg.cn/07bec00ef4d54b66a856ca14f222001b.png"
      },
      {
        "title": 'Candy Shop2',
        "author": "Mohamed2",
        "imagesUrl":
            "https://img-blog.csdnimg.cn/07bec00ef4d54b66a856ca14f222001b.png"
      },
      {
        "title": 'Candy Shop3',
        "author": "Mohamed3",
        "imagesUrl":
            "https://img-blog.csdnimg.cn/07bec00ef4d54b66a856ca14f222001b.png"
      }
    ];
    var tempList = listData.map((value) {
      return Container(
        child: Column(
          children: <Widget>[
            Image.network(value["imagesUrl"]),
            SizedBox(height: 4),
            Text(value["title"],
            textAlign: TextAlign.center,
            style: TextStyle(
              fontSize: 20
            ),
            )
          ],
        ),
        decoration: BoxDecoration(
          border: Border.all(
            color: Colors.deepPurple,
            width: 2
          )
        ),
      );
    });
    return tempList.toList();
  }

  @override
  Widget build(BuildContext context) {
    return GridView.count(
        padding: EdgeInsets.all(10),
        crossAxisCount: 2, //一行多少个组件
        mainAxisSpacing: 10,
        crossAxisSpacing: 10,
        // childAspectRatio: 0.7, //宽度和高度的比例是0.7
        children: this._getListData());
  }
}

在这里插入图片描述动态

import 'package:flutter/material.dart';

main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('day_2',
              textDirection: TextDirection.ltr,
              style: TextStyle(fontSize: 10, color: Colors.purpleAccent),
              textAlign: TextAlign.center,
              maxLines: 1),
        ),
        body: HomeContent(),
      ),
    );
  }
}

class HomeContent extends StatelessWidget {
  List listData = [
    {
      "title": 'Candy Shop',
      "author": "Mohamed",
      "imagesUrl":
          "https://img-blog.csdnimg.cn/07bec00ef4d54b66a856ca14f222001b.png"
    },
    {
      "title": 'Candy Shop2',
      "author": "Mohamed2",
      "imagesUrl":
          "https://img-blog.csdnimg.cn/07bec00ef4d54b66a856ca14f222001b.png"
    },
    {
      "title": 'Candy Shop3',
      "author": "Mohamed3",
      "imagesUrl":
          "https://img-blog.csdnimg.cn/07bec00ef4d54b66a856ca14f222001b.png"
    }
  ];
  Widget _getListData(context,index) {
    return Container(
      child: Column(
        children: <Widget>[
          Image.network(listData[index]["imagesUrl"]),
          SizedBox(height: 4),
          Text(
            listData[index]["title"],
            textAlign: TextAlign.center,
            style: TextStyle(fontSize: 20),
          )
        ],
      ),
      decoration:
          BoxDecoration(border: Border.all(color: Colors.deepPurple, width: 2)),
    );
  }

  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2, //一行多少个组件
        mainAxisSpacing: 10,
        crossAxisSpacing: 10,
      ),
      itemCount: listData.length,
      itemBuilder: this._getListData,
    );
  }
}

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('data'),
        ),
        body: HomeContent(),
      ),
    );
  }
}

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.fromLTRB(0, 0, 10, 0),
      child: Center(
      child: GridView.count(
      crossAxisCount: 2,
      childAspectRatio: 1.7,
      children: <Widget>[
        Padding(
          padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
          child: Image.network(
              'https://img-blog.csdnimg.cn/07bec00ef4d54b66a856ca14f222001b.png'),
        ),
        Padding(
          padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
          child: Image.network(
              'https://img-blog.csdnimg.cn/07bec00ef4d54b66a856ca14f222001b.png'),
        ),
        Padding(
          padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
          child: Image.network(
              'https://img-blog.csdnimg.cn/07bec00ef4d54b66a856ca14f222001b.png'),
        )
      ],
    )),
    );
  }
}

未测试
自定义按钮组件

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget{
  @override
    Widget build(BuildContext context) {
      return MaterialApp(
        home: Scaffold(
          appBar: AppBar(title: Text("Flutter"),
          ),
          body: LayoutDemo(),
        ),
      );
    }
}
class LayoutDemo extends StatelessWidget{
  @override
    Widget build(BuildContext context) {
      return IconContainer(Icons.home,23.0);
    }
}
class IconContainer  extends StatelessWidget{
  double size;
  Color color;
  IconData icon;
  IconContainer(this.icon,this.size,{this.color});
  @override
    Widget build(BuildContext context) {
      return Container(
        height: 100,
        width: 100,
        color: this.color,
        child: Center(
          child: Icon(this.icon,this.size,color: Colors.pink,),
        ),
      );
    }
}

水平布局组件

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget{
  @override
    Widget build(BuildContext context) {
      return MaterialApp(
        home: Scaffold(
          appBar: AppBar(title: Text("Flutter"),
          ),
          body: LayoutDemo(),
        ),
      );
    }
}
class LayoutDemo extends StatelessWidget{
  @override
    Widget build(BuildContext context) {
      return Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,//用的比较多
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
         
        ],
      );
    }
}

Expanded

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Flutter"),
        ),
        body: LayoutDemo(),
      ),
    );
  }
}

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
        
          flex: 1,
          child: Text("data"),
        ),
        Expanded(
          flex: 2,
          child: Text("data"),
        )
      ],
    );
  }
}

在这里插入图片描述

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: LayoutDemo(),
      ),
    );
  }
}

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.all(10),
      child: Column(
      children: <Widget>[
        Container(
          width: 500,
          height: 200,
          decoration: BoxDecoration(color: Colors.pink),
        ),
        SizedBox(height: 10),
        Container(
          width: 500,
          height: 150,
          child: Row(
            children: <Widget>[
              Expanded(
                flex: 2,
                child: Container(
                  decoration: BoxDecoration(color: Colors.blue),
                ),
              ),
              SizedBox(width: 10),
              Expanded(
                flex: 1,
                child: Column(
                  children: <Widget>[
                    Expanded(
                      flex: 1,
                      child: Container(
                        decoration: BoxDecoration(color: Colors.green),
                      ),
                    ),
                       SizedBox(height: 10),
                    Expanded(
                      child: Container(
                          decoration: BoxDecoration(color: Colors.cyan)),
                      flex: 1,
                    )
                  ],
                ),
              )
            ],
          ),
        )
      ],
    ),
    );
  }
}

在这里插入图片描述

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: LayoutDemo(),
      ),
    );
  }
}

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 400,
      height: 600,
      child: Stack(
        children: <Widget>[
          Align(
            alignment: Alignment(1,1),
              child: Image.network(
            "https://img-blog.csdnimg.cn/77b16c81bfea42b39feb940c694ee41a.png",
          )),
          Positioned(
            child:  Text("我是一个文本",
            style: TextStyle(
              color: Colors.white
            ),
            ),
            bottom: 10,
          ),
          Align(
            child: Icon(Icons.nature, 32,color: Colors.purple,),
          )
        ],
      ),
    );
  }
}

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: LayoutDemo(),
      ),
    );
  }
}

class LayoutDemo extends StatelessWidget {
  List list = [
    {
      " ImageUrl":
          "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201605%2F23%2F20160523002341_PJwcN.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1645961756&t=0ea8cc68d2b461e62db9b818cda1bf4c",
      "title": "千与千寻",
      "subtitle": "简介：《千与千寻》由吉卜力工作室制作的动画电影，由宫崎骏执导，柊瑠美、入野自由、中村彰男、夏木真理等人参与配音"
    },
    {
      " ImageUrl":
          "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201605%2F23%2F20160523002341_PJwcN.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1645961756&t=0ea8cc68d2b461e62db9b818cda1bf4c",
      "title": "千与千寻",
      "subtitle": "简介：《千与千寻》由吉卜力工作室制作的动画电影，由宫崎骏执导，柊瑠美、入野自由、中村彰男、夏木真理等人参与配音"
    },
    {
      " ImageUrl":
          "https://img1.baidu.com/it/u=2151444467,988054706&fm=253&fmt=auto&app=138&f=JPEG?w=730&h=405",
      "title": "龙猫",
      "subtitle": "简介：小月的母亲生病住院了,父亲带着她与四岁的妹妹小梅到乡间的居住。她们对那里的环境都感到十分新奇,也发现了很多有趣的"
    }
  ];
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: <Widget>[
        Card(
          margin: EdgeInsets.all(10),
          child: Column(
            children: <Widget>[
              AspectRatio(
                aspectRatio: 16 / 9,
                child: Image.network(
                    "https://img-blog.csdnimg.cn/77b16c81bfea42b39feb940c694ee41a.png",fit: BoxFit.cover,),
              ),
              ListTile(
                leading: CircleAvatar(
                  backgroundImage: NetworkImage(
                      "//pic.ntimg.cn/file/20181003/10673188_135257284082_2.jpg"),
                ),
                title: Text("家的诱惑"),
                subtitle: Text(
                  "xxx",
                  overflow: TextOverflow.ellipsis,
                  maxLines: 1,
                ),
              )
            ],
          ),
        )
      ],
    );
  }
}

在这里插入图片描述
list集合

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: LayoutDemo(),
      ),
    );
  }
}

class LayoutDemo extends StatelessWidget {
  List list = [
    {
      "imageUrl":
          'https://img-blog.csdnimg.cn/4e48610c93e84ee39624108601b79073.png',
      "title": "千与千寻",
      "subtitle": "简介：《千与千寻》由吉卜力工作室制作的动画电影，由宫崎骏执导，柊瑠美、入野自由、中村彰男、夏木真理等人参与配音"
    },
    {
      "imageUrl":'https://img-blog.csdnimg.cn/16e1208f8ced49e8b74daa0cb51f304d.png',
      "title": "龙猫",
      "subtitle": "简介：小月的母亲生病住院了,父亲带着她与四岁的妹妹小梅到乡间的居住。她们对那里的环境都感到十分新奇,也发现了很多有趣的"
    }
  ];
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: list.map((value){
        return Card(
          margin: EdgeInsets.all(10),
          child: Column(
            children: <Widget>[
              AspectRatio(
                aspectRatio: 16 / 9,
                child: Image.network(value["imageUrl"],fit: BoxFit.cover,),
              ),
              ListTile(
                leading: CircleAvatar(
                  backgroundImage: NetworkImage(
                      "https://img1.baidu.com/it/u=3228295310,2105988952&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"),
                ),
                title: Text( value["title"]),
                subtitle: Text(
                 value["subtitle"],
                  overflow: TextOverflow.ellipsis,
                  maxLines: 1,
                ),
              )
            ],
          ),
        );
      }).toList(),
    );
  }
}

在这里插入图片描述
按钮

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: LayoutDemo(),
      ),
    );
  }
}

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Wrap(
      spacing: 10,//横轴边距
      runSpacing: 10,//纵轴边距
      children: <Widget>[
        Mybutton("第1季"),
        Mybutton("第2季"),
        Mybutton("第3季"),
        Mybutton("第4季"),
        Mybutton("第5季")
      ],
    );
  }
}
class Mybutton extends StatelessWidget{
  final String text;
  Mybutton(this.text,{Key key}):super(key:key);//自定义按钮组件
  @override
    Widget build(BuildContext context) {
      return RaisedButton(
        child: Text(this.text),
        textColor: Theme.of(context).accentColor,
        onPressed: (){},
      );
    }
}

在这里插入图片描述
StatefulWidget

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: LayoutDemo(),
      ),
    );
  }
}

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Wrap(
      spacing: 10,//横轴边距
      runSpacing: 10,//纵轴边距
      children: <Widget>[
      
      ],
    );
  }
}
// fstful 自定义无状态组件
class Homepage extends StatefulWidget {
  const Homepage({ Key key }) : super(key: key);

  @override
  _HomepageState createState() => _HomepageState();
}

class _HomepageState extends State<Homepage> {
  int countNum = 0;
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Chip(
        label: Text("${this.countNum}"),
        ),
        RaisedButton(
          child: Text("按钮"),
          onPressed: (){
            setState(() {
                    this.countNum++;
                        });
          },
        )
      ],
    );
  }
}

按钮添加内容

import 'package:flutter/material.dart';
main(List<String> args) {
  runApp(MyFutter());
}
class MyFutter extends StatelessWidget{
  @override
    Widget build(BuildContext context) {
      return MaterialApp(
        home:Scaffold(
          appBar: AppBar(
            title: Text("flutter"),
          ),
          body: DemoItem(),
        ),
      );
    }
}
class DemoItem extends StatefulWidget {
  const DemoItem({ Key key }) : super(key: key);

  @override
  _DemoItemState createState() => _DemoItemState();
}

class _DemoItemState extends State<DemoItem> {
  List list = List();
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: <Widget>[
        Column(
          children: <Widget>[
          Column(
            children: this.list.map((value){
              return ListTile(
                title: Text(value),
              );
            }).toList(),
          ),
                  RaisedButton(
              child: Text("按钮"),
              onPressed: (){
                list.add("value");
              },
            )
          ],
        )
      ],
    );
  }
}

Scaffold下的bottomNavigationBar

import 'package:flutter/material.dart';
main(List<String> args) {
  runApp(MyFutter());
}
class MyFutter extends StatelessWidget{
  @override
    Widget build(BuildContext context) {
      return MaterialApp(
        home:Scaffold(
          appBar: AppBar(
            title: Text("flutter"),
          ),
          body: DemoItem(),
          bottomNavigationBar: BottomNavigationBar(
            items: [
              BottomNavigationBarItem(
                icon: Icon(Icons.home, 24),
                title: Text("首页")
              ),
                BottomNavigationBarItem(
                icon: Icon(Icons.category, 24),
                title: Text("分类")
              ),
                BottomNavigationBarItem(
                icon: Icon(Icons.settings, 24),
                title: Text("设置")
              )
            ],
          ),
        ),
      );
    }
}

动态改变

import 'package:flutter/material.dart';

main(List<String> args) {
  runApp(MyFutter());
}

class MyFutter extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("flutter"),
        ),
        body: Text("data"),
        bottomNavigationBar: Tabs(),
      ),
    );
  }
}

class Tabs extends StatefulWidget {
  const Tabs({Key key}) : super(key: key);

  @override
  _TabsState createState() => _TabsState();
}

class _TabsState extends State<Tabs> {
  int _currentIndex = 0;
  @override
  Widget build(BuildContext context) {
    return BottomNavigationBar(
      currentIndex: this._currentIndex,
      onTap: (int index) {
       setState(() {
                this._currentIndex = index;
              });
      },
      items: [
        BottomNavigationBarItem(
        icon: Icon(Icons.home, 24.0), title: Text("首页")),
        BottomNavigationBarItem(
        icon: Icon(Icons.category, 24.0), title: Text("分类")),
        BottomNavigationBarItem(
        icon: Icon(Icons.settings, 24.0), title: Text("设置"))
      ],
    );
  }
}

切换页面

import 'package:flutter/material.dart';
import '../page/Home.dart';
import '../page/Category.dart';
import '../page/Setting.dart';

class Tabs extends StatefulWidget {
  const Tabs({Key key}) : super(key: key);
  @override
  _TabsState createState() => _TabsState();
}

class _TabsState extends State<Tabs> {
  int _currentIndex = 0;
  List _listpage = [
    Homepage(),
    Categorypage(),
    Settingpage(),
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter Demo"),
      ),
      body: _listpage[this._currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: this._currentIndex,
        onTap: ((int index) {
          setState(() {
            this._currentIndex = index;
          });
        }),
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.home), title: Text("首页")),
          BottomNavigationBarItem(
              icon: Icon(Icons.category), title: Text("分类")),
          BottomNavigationBarItem(icon: Icon(Icons.settings), title: Text("设置"))
        ]),
    );
  }
}

普通路由,路由跳转

import 'package:flutter/material.dart';
class Searchpage extends StatefulWidget {
  const Searchpage({ Key key }) : super(key: key);

  @override
  _SearchpageState createState() => _SearchpageState();
}
class _SearchpageState extends State<Searchpage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        child: Text("返回"),
        onPressed: (){
          Navigator.of(context).pop();
        },
      ),
      appBar: AppBar(
        title: Text("Search"),
      ),
      body: ListView(
        children: <Widget>[

        ],
      ),
    );
  }
}

import 'package:flutter/material.dart';
import 'Search.dart';

class Settingpage extends StatefulWidget {
  const Settingpage({Key key}) : super(key: key);

  @override
  _SettingpageState createState() => _SettingpageState();
}

class _SettingpageState extends State<Settingpage> {
  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      child: Text("跳转到搜索页面"),
      onPressed: () {
     Navigator.of(context).push(
       MaterialPageRoute(
         builder: (context)=>Searchpage()
       )
     );
      },
    );
  }
}

命名路由

import 'package:flutter/material.dart';
class Settingpage extends StatefulWidget {
  const Settingpage({Key key}) : super(key: key);

  @override
  _SettingpageState createState() => _SettingpageState();
}

class _SettingpageState extends State<Settingpage> {
  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      child: Text("跳转到搜索页面"),
      onPressed: () {
     Navigator.pushNamed(context, '/search');
      },
    );
  }
}

import 'package:flutter/material.dart';
import 'pages/Search.dart';
import 'pages/Home.dart';
main(List<String> args) {
  runApp(MyFutter());
}

class MyFutter extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Homepage(),
      routes: {
        '/search':(context)=>Searchpage()
      },
    );
  }
}

带参数的路由跳转
路由配置

  Widget build(BuildContext context) {
    return MaterialApp(
        home: Homepage(),
        //固定写法
        onGenerateRoute: (RouteSettings settings) {
          // 统一处理
          final String name = settings.name;
          final Function pageContentBuilder = routers[name];
          if (pageContentBuilder != null) {
            final Route route = MaterialPageRoute(
              builder: (context) {
                //将RouteSettings中的arguments参数取出来，通过构造函数传入
                return pageContentBuilder(context,
                    arguments: settings.arguments);
              },
              settings: settings,
            );
            return route;
          }
        });
  }

main

import 'package:flutter/material.dart';
import 'pages/Contentstext.dart';
import 'pages/Home.dart';
main(List<String> args) {
  runApp(MyFutter());
}
class MyFutter extends StatelessWidget {
  final routers = {'/Contentstextpage': (context,{arguments}) => Contentstextpage(arguments:arguments)};
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Homepage(),
        //固定写法
        onGenerateRoute: (RouteSettings settings) {
          // 统一处理
          final String name = settings.name;
          final Function pageContentBuilder = routers[name];
          if (pageContentBuilder != null) {
            final Route route = MaterialPageRoute(
              builder: (context) {
                //将RouteSettings中的arguments参数取出来，通过构造函数传入
                return pageContentBuilder(context,
                    arguments: settings.arguments);
              },
              settings: settings,
            );
            return route;
          }
        });
  }
}

import 'package:flutter/material.dart';
class Settingpage extends StatefulWidget {
  const Settingpage({Key key}) : super(key: key);

  @override
  _SettingpageState createState() => _SettingpageState();
}

class _SettingpageState extends State<Settingpage> {
  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      child: Text("跳转到搜索页面"),
      onPressed: () {
    Navigator.pushNamed(context, '/Contentstextpage',arguments: {
      "id":123
    });
      },
    );
  }
}

import 'package:flutter/material.dart';
class Contentstextpage extends StatelessWidget {
final arguments;
  Contentstextpage({this.arguments});
  @override
  Widget build(BuildContext context){
    return Container(
      child: Text("这是一个命名路由页面${arguments != null ? arguments['id'] : '0'}"),
    );
  }
}

初始化路由页面

import 'package:flutter/material.dart';
import 'routes/Routes.dart';

main(List<String> args) {
  runApp(MyFutter());
}

class MyFutter extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      initialRoute: '/', //初始化加载的路由
      onGenerateRoute: onGenerateRoute,
    );
  }
}

StatefulWidge下

import 'package:flutter/material.dart';
class _Productpage extends StatefulWidget {
  const _Productpage({ Key key }) : super(key: key);

  @override
  __ProductpageState createState() => __ProductpageState();
}

class __ProductpageState extends State<_Productpage> {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: RaisedButton(
        child: Text("调转到商品详情"),
        onPressed: (){
          Navigator.pushNamed(context, '/Productinfopage',arguments:{
            "pid":123
          });
        },
      ),
    );
  }
}

import 'package:flutter/material.dart';
class Productinfopage extends StatefulWidget {
  Map arguments;
  Productinfopage({ Key key,this.arguments }) : super(key: key);

  @override
  _ProductinfopageState createState() => _ProductinfopageState();
}

class _ProductinfopageState extends State<Productinfopage> {
  Map arguments;
   _ProductinfopageState({this.arguments});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("商品"),
      ),
      body: Container(
      child: Text("pid=${arguments["pid"]}"),
    ),
    );
  }
}

import '../pages/Contentstext.dart';
import '../pages/Home.dart';
import 'package:flutter/material.dart';
import '../pages/Productinfo.dart';
final routers = {
  '/Contentstextpage': (context, {arguments}) =>
      Contentstextpage(arguments: arguments),
  '/Productinfopage':(context,{arguments})=>Productinfopage(arguments: arguments),
  '/': (context, {arguments}) => Homepage()
};
       //固定写法
    var onGenerateRoute = (RouteSettings settings) {
          // 统一处理
          final String name = settings.name;
          final Function pageContentBuilder = routers[name];
          if (pageContentBuilder != null) {
            final Route route = MaterialPageRoute(
              builder: (context) {
                //将RouteSettings中的arguments参数取出来，通过构造函数传入
                return pageContentBuilder(context,
                    arguments: settings.arguments);
              },
              settings: settings,
            );
            return route;
          }
        };

路由替换返回指定根

import 'package:flutter/material.dart';
import '../../pages/Tabs.dart';
class RegisterThirdpage extends StatefulWidget {
  const RegisterThirdpage({ Key key }) : super(key: key);

  @override
  _RegisterThirdpageState createState() => _RegisterThirdpageState();
}

class _RegisterThirdpageState extends State<RegisterThirdpage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("第三步，完成注册"),
      ),
      body: Center(
        child: Column(
          children: <Widget>[
            SizedBox(height: 20,),
            Text('输入密码完成注册'),
            RaisedButton(
              child: Text("确定"),
              onPressed: (){
              // Navigator.of(context).pop();
              //返回根
              Navigator.of(context).pushAndRemoveUntil(new MaterialPageRoute(builder: (context)=>new Tabs(index: 2,)), (route)=>route == null);
              },
            )
          ],
        ),
      ),
    );
  }
}

import 'package:flutter/material.dart';
import 'Category.dart';
import 'Setting.dart';
import 'Home.dart';
class Tabs extends StatefulWidget {
  final index;
  Tabs({Key key,this.index = 0}):super(key:key);

  @override
  _TabsState createState() => _TabsState(this.index);
}

class _TabsState extends State<Tabs> {
  _TabsState(index){
    this._currentIndex = index;
  }
  List _listpage = [
    Homepage(),
    Categorypage(),
    Settingpage(),
  ];
  int _currentIndex;
  @override
  Widget build(BuildContext context) {
    return BottomNavigationBar(
      iconSize: 26.0,
      fixedColor: Colors.red,
      currentIndex: this._listpage[this._currentIndex],
      onTap: (int index) {
       setState(() {
                this._currentIndex = index;
              });
      },
      items: [
        BottomNavigationBarItem(
        icon: Icon(Icons.home), title: Text("首页")),
        BottomNavigationBarItem(
        icon: Icon(Icons.category), title: Text("分类")),
        BottomNavigationBarItem(
        icon: Icon(Icons.settings), title: Text("设置"))
      ],
    );
  }
}

import '../pages/Contentstext.dart';
import '../pages/Home.dart';
import 'package:flutter/material.dart';
import '../pages/Productinfo.dart';
import '../pages/user/Login.dart';
import '../pages/user/RegisterFirst.dart';
import '../pages/user/RegisterSecond.dart';
import '../pages/user/RegisterThird.dart';

final routers = {
  '/Contentstextpage': (context, {arguments}) =>
      Contentstextpage(arguments: arguments),
  '/Productinfopage': (context, {arguments}) =>
      Productinfopage(arguments: arguments),
  '/': (context, {arguments}) => Homepage(),
  '/Loginpage': (context, {arguments}) => Loginpage(),
  '/RegisterFirstpage': (context, {arguments}) => RegisterFirstpage(),
  '/RegisterSecondpage': (context, {arguments}) => RegisterSecondpage(),
  '/RegisterThirdpage': (context, {arguments}) => RegisterThirdpage(),
};
//固定写法
var onGenerateRoute = (RouteSettings settings) {
  // 统一处理
  final String name = settings.name;
  final Function pageContentBuilder = routers[name];
  if (pageContentBuilder != null) {
    final Route route = MaterialPageRoute(
      builder: (context) {
        //将RouteSettings中的arguments参数取出来，通过构造函数传入
        return pageContentBuilder(context, arguments: settings.arguments);
      },
      settings: settings,
    );
    return route;
  }
};

appbar

import 'package:flutter/material.dart';

class AppBarDemopage extends StatefulWidget {
  const AppBarDemopage({Key key}) : super(key: key);

  @override
  _AppBarDemopageState createState() => _AppBarDemopageState();
}

class _AppBarDemopageState extends State<AppBarDemopage> {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 2,
      child: Scaffold(
        appBar: AppBar(
          bottom: TabBar(
            tabs: <Widget>[
              Tab(
                text: "热门",
              ),
              Tab(
                text: "推荐",
              )
            ],
          ),
          // title: Text("Appbar"),
          // centerTitle: true,
          // backgroundColor: Colors.red,
          // leading: IconButton(
          //   icon: Icon(Icons.menu),
          //   onPressed: () {},
          // ),
        ),
        body: TabBarView(
          children: <Widget>[
            ListView(
              children: <Widget>[
                ListTile(
                  title: Text("第一个tab切换"),
                ),
                ListTile(
                  title: Text("第一个tab切换"),
                ),
                ListTile(
                  title: Text("第一个tab切换"),
                )
              ],
            ),
                    ListView(
              children: <Widget>[
                ListTile(
                  title: Text("第二个tab切换"),
                ),
                ListTile(
                  title: Text("第二个tab切换"),
                ),
                ListTile(
                  title: Text("第二个tab切换"),
                )
              ],
            )
          ],
        ),
      ),
    );
  }
}