一份超级详细的Flutter基础组件练习示例，请查收！

学习B站技术胖的flutter基础课程整理的示例，为了平时方便查阅，同时希望能和大家一同进步~

Flutter基础组件

Hello world

import 'package:flutter/material.dart'; // 引入materialUI库
// 主函数(入口函数)
void main() => runApp(MyApp());
// 声明MyApp类
class MyApp extends StatelessWidget {
  // 继承后要重构build方法
  @override //覆盖，重新写方法
  Widget build(BuildContext context) {
    // 返回一个Material风格的组件
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
          //创建一个Bar，并添加文本
          appBar: AppBar(
            title: Text('Welcome to------ Flutter'),
          ),
          // 在主题的中间区域，添加一个hello world的文本
          body: Center(
            child: Text('Hello leon'),
          )),
    );
  }
}

Text Widget

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Text widget',
      home: Scaffold(
        body: Center(
            child: Text(
          'Hello Leon,我是赵沐阳，我特别喜欢前端和大数据，并且愿意为此奋斗一生。我希望可以考上西交大/西工大',
          textAlign: TextAlign.left,
          maxLines: 1,
          overflow: TextOverflow.ellipsis,
          style: TextStyle(
            fontSize: 25.0,
            color: Color.fromARGB(255, 255, 150, 150),
            decoration: TextDecoration.underline,
            decorationStyle: TextDecorationStyle.solid,
          ),
        )),
      ),
    );
  }
}

Container Widget

Alignment、宽、高、颜色

import 'package:flutter/material.dart'; // 引入materialUI库

// 主函数(入口函数)
void main() => runApp(MyApp());

// 声明MyApp类
class MyApp extends StatelessWidget {
  // 继承后要重构build方法
  @override //覆盖，重新写方法
  Widget build(BuildContext context) {
    // 返回一个Material风格的组件
    return MaterialApp(
      title: 'Text Widget',
      home: Scaffold(
          body: Center(
              child: Container(
        child: new Text(
          'Hello Leon',
          style: TextStyle(fontSize: 40.0),
        ),
        alignment: Alignment.topCenter,
        width: 500.0,
        height: 400.0,
        color: Colors.lightBlue,
      ))),
    );
  }
}

Container widget2

padding、margin、decoration

import 'package:flutter/material.dart'; // 引入materialUI库

// 主函数(入口函数)
void main() => runApp(MyApp());

// 声明MyApp类
class MyApp extends StatelessWidget {
  // 继承后要重构build方法
  @override //覆盖，重新写方法
  Widget build(BuildContext context) {
    // 返回一个Material风格的组件
    return MaterialApp(
      title: 'Text Widget',
      home: Scaffold(
          body: Center(
              child: Container(
        child: new Text(
          'Hello Leon',
          style: TextStyle(fontSize: 40.0),
        ),
        alignment: Alignment.topLeft,
        width: 500.0,
        height: 400.0,
        // color: Colors.lightBlue,(如果使用了decoration，不要再设置color属性，会冲突)
        
        // padding属性是内边距，指的是Container边缘与child内容的距离
        // padding: const EdgeInsets.all(10.0),
        padding: const EdgeInsets.fromLTRB(10.0, 30.0, 0.0, 0.0),
        
        // margin属性是外边距，指的是container和外部元素的距离
        margin: const EdgeInsets.all(10.0),
        
        // decoration是container的修饰器，是设置背景和边框
        decoration: new BoxDecoration(
          gradient: const LinearGradient(
            colors: [Colors.lightBlue,Colors.greenAccent,Colors.purple]
          ),
          border: Border.all(width:2.0,color:Colors.red)
        )

      ))),
    );
  }
}

Image Widget

fit拉伸和挤压、图片颜色混合、repeat图片重复

import 'package:flutter/material.dart'; // 引入materialUI库

// 主函数(入口函数)
void main() => runApp(MyApp());

// 声明MyApp类
class MyApp extends StatelessWidget {
  // 继承后要重构build方法
  @override //覆盖，重新写方法
  Widget build(BuildContext context) {
    // 返回一个Material风格的组件
    return MaterialApp(
        title: 'Image Widget',
        home: Scaffold(
            body: Center(
          child: Container(
            child: new Image.network(
              'https://img.bosszhipin.com/beijin/upload/tmp/20190423/40af1ec03087856b0f6ec5dc719ccb01f4c816c40c4b8f9a43721237ec240794.png?x-oss-process=image/resize,w_120,limit_0',
              // fit: BoxFit.contain,
              color: Colors.greenAccent,
              colorBlendMode: BlendMode.darken,
              repeat: ImageRepeat.repeatY,
            ),
            width: 300.0,
            height: 200.0,
            color: Colors.lightBlue,
          ),
        )));
  }
}

ListView Widget

ListTile(列表瓦片)、图片列表

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'LeonZhao Flutter Demo',
      home: Scaffold(
        appBar: new AppBar(title: new Text('ListView Widget')),
        body: new ListView(
          children: [
            // ListTile(列表瓦片)
            // new ListTile(
            //     leading: new Icon(Icons.access_alarm),
            //     title: new Text('access_alarm')),
            // new ListTile(
            //     leading: new Icon(Icons.accessibility_new_outlined),
            //     title: new Text('accessibility_new_outlined')),
            // new ListTile(
            //     leading: new Icon(Icons.wb_shade_sharp),
            //     title: new Text('wb_shade_sharp'))

            // 图片列表
            new Image.network('https://newimg.jspang.com/Vue3_logo.jpg'),
            new Image.network('https://newimg.jspang.com/web111111.jpg'),
            new Image.network('https://newimg.jspang.com/TaroLogo1.jpg'),
            new Image.network('https://newimg.jspang.com/react_blog_demo.jpg')
          ],
        ),
      ),
    );
  }
}

横向列表

scrollDirection

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'LeonZhao Flutter Demo',
      home: Scaffold(
          appBar: new AppBar(title: new Text('ListView Widget')),
          body: Center(
            child: Container(
                height: 200.0,
                child: new ListView(
                  scrollDirection: Axis.horizontal,
                  children: [
                    new Container(
                      width: 180.0,
                      color: Colors.redAccent,
                    ),
                    new Container(
                      width: 180.0,
                      color: Colors.amber,
                    ),
                    new Container(
                      width: 180.0,
                      color: Colors.deepOrange,
                    ),
                    new Container(
                      width: 180.0,
                      color: Colors.deepPurpleAccent,
                    ),
                  ],
                )),
          )),
    );
  }
}

减少嵌套，代码优化

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'LeonZhao Flutter Demo',
      home: Scaffold(
        appBar: new AppBar(title: new Text('ListView Widget')),
        body: Center(
          child: Container(height: 200.0, child: MyList()),
        ),
      ),
    );
  }
}

// 代码优化，将列表组件独立定义成一个类，然后加入到子组件中
class MyList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
      scrollDirection: Axis.horizontal,
      children: [
        new Container(
          width: 180.0,
          color: Colors.redAccent,
        ),
        new Container(
          width: 180.0,
          color: Colors.yellowAccent,
        ),
        new Container(
          width: 180.0,
          color: Colors.deepOrange,
        ),
        new Container(
          width: 180.0,
          color: Colors.deepPurpleAccent,
        ),
      ],
    );
  }
}

动态列表

ListView.builder()

import 'package:flutter/material.dart';
void main() =>
    // 在main函数的runApp中调用了MyApp类
    // 需要在入口组件MyApp中传入一个List,需要先声明一个List
    // items是传入的参数，声明一个List，要求是String类型的
    // 调用generate方法来生成这个List，需要传入2个参数，1个是List的长度，1个是需要的内容
    runApp(MyApp(items: List.generate(1000, (i) => "item $i")));

class MyApp extends StatelessWidget {
  // 参数已经传递了，MyApp这个类就要接收这个参数
  //- 定义一个变量
  final List items;
  /*
   * 构造函数,用于接收外部传入的参数 
   * Key key 固定写法,需要传入key值
   * @required 表示这个参数为必须传入
   * this.items 调用当前类声明的items
   * :super(key: key) 由于当前继承的是StatelessWidget,需要调用super重新构造
   */
  MyApp({required this.items}) : super();
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'beline App',
      home: Scaffold(
        appBar: AppBar(title: Text('动态列表')),
        // 怎样使用这个传递进来的Items呢？
        // vue中可以通过for循环来遍历数组，实现反复渲染页面结构的目的
        // flutter提供了ListView.builder()动态构建list的组件来实现数组的遍历
        body: ListView.builder(
            itemCount: items.length, //- 要生成的条数
            itemBuilder: (context, index) { // 要生成的内容 
            //itemBulider需要两个参数，一个是上下文，一个是下标
              return ListTile(title: Text('${items[index]}')); 
            }),
      ),
    );
  }
}

网格列表

GridView.count

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ListView widget',
      home: Scaffold(
        // GridView网格组件
        body: GridView.count(
          padding: const EdgeInsets.all(20.0), //内边距
          crossAxisSpacing: 10.0, // 网格间的空当，相当于每个网格之间的间距
          crossAxisCount: 3, // 网格的列数，相当于一行放置的网格数量
          children: [
            const Text("My name is Leonzhao"),
            const Text("My book is Muyang"),
            const Text("我是赵沐阳 "),
            const Text("我喜欢看电影"),
            const Text("我喜欢看书"),
            const Text("I Love Wan"),
          ],
        ),
      ),
    );
  }
}

GridView(更加原生的方法)

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ListView widget',
      home: Scaffold(
          // GridView网格组件
          body: GridView(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 3,
            mainAxisSpacing: 2.0, // 每个影片纵向之间的距离
            crossAxisSpacing: 2.0, // 每个影片横向之间的距离
            childAspectRatio: 0.7), // 宽高比，宽是高的多少倍
        // 如果宽是高的2倍，那就写2.0，如果高是宽的2倍，那就写0.5
        children: [
          new Image.network(
              'http://img5.mtime.cn/mt/2018/10/22/104316.77318635_180X260X4.jpg',
              fit: BoxFit.cover),
          new Image.network(
              'http://img5.mtime.cn/mt/2018/10/10/112514.30587089_180X260X4.jpg',
              fit: BoxFit.cover),
          new Image.network(
              'http://img5.mtime.cn/mt/2018/11/13/093605.61422332_180X260X4.jpg',
              fit: BoxFit.cover),
          new Image.network(
              'http://img5.mtime.cn/mt/2018/11/07/092515.55805319_180X260X4.jpg',
              fit: BoxFit.cover),
          new Image.network(
              'http://img5.mtime.cn/mt/2018/11/21/090246.16772408_135X190X4.jpg',
              fit: BoxFit.cover),
          new Image.network(
              'http://img5.mtime.cn/mt/2018/11/17/162028.94879602_135X190X4.jpg',
              fit: BoxFit.cover),
          new Image.network(
              'http://img5.mtime.cn/mt/2018/11/19/165350.52237320_135X190X4.jpg',
              fit: BoxFit.cover),
          new Image.network(
              'http://img5.mtime.cn/mt/2018/11/16/115256.24365160_180X260X4.jpg',
              fit: BoxFit.cover),
          new Image.network(
              'http://img5.mtime.cn/mt/2018/11/20/141608.71613590_135X190X4.jpg',
              fit: BoxFit.cover),
        ],
      )),
    );
  }
}

布局Row Widget

非灵活水平布局

// Flutter的row控件就是水平控件
// 它可以让Row里边的子元素进行水平排列

// row控件可以分为灵活排列和非灵活排列

// 非灵活水平布局，根据Row子元素的大小进行布局
// 如果子元素不足，它会留有空隙，如果子元素超出，它会警告
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ListView Wdiget',
      home: Scaffold(
        appBar: new AppBar(
          title: new Text('水平方向布局'),
        ),
        // 可以看到，页面上这三个按钮并没有充满一行，而是出现了空隙
        // 这就是不灵活横向排列造成的，它根据子元素的大小进行排列
        body: new Row(
          children: [
            new RaisedButton(
                onPressed: () {},
                color: Colors.redAccent,
                child: new Text('Red Button')),
            new RaisedButton(
                onPressed: () {},
                color: Colors.orangeAccent,
                child: new Text('orange Button')),
            new RaisedButton(
                onPressed: () {},
                color: Colors.pinkAccent,
                child: new Text('pink Button')),
          ],
        ),
      ),
    );
  }
}

灵活水平布局

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ListView Wdiget',
      home: Scaffold(
        appBar: new AppBar(
          title: new Text('水平方向布局'),
        ),

        // 解决上面空隙的问题，可以使用Expended来解决，也就是灵活布局,在按钮的外边加入Expanded就可以
        body: new Row(
          children: [
            Expanded(
                child: new RaisedButton(
                    onPressed: () {},
                    color: Colors.redAccent,
                    child: new Text('Red Button'))),
            Expanded(
                child: new RaisedButton(
                    onPressed: () {},
                    color: Colors.orangeAccent,
                    child: new Text('orange Button'))),
            Expanded(
                child: new RaisedButton(
                    onPressed: () {},
                    color: Colors.pinkAccent,
                    child: new Text('pink Button'))),
          ],
        ),
      ),
    );
  }
}

灵活与不灵活的混用

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ListView Wdiget',
      home: Scaffold(
        appBar: new AppBar(
          title: new Text('水平方向布局'),
        ),

        // 我们有时想让中间的按钮大，而两边的按钮保持真实大小
        // 就可以使用不灵活与灵活模式进行混用
        body: new Row(
          children: [
            new RaisedButton(
                onPressed: () {},
                color: Colors.redAccent,
                child: new Text('Red Button')
            ),
            Expanded(
                child: new RaisedButton(
                    onPressed: () {},
                    color: Colors.orangeAccent,
                    child: new Text('orange Button')
                  )
            ),
            new RaisedButton(
                onPressed: () {},
                color: Colors.pinkAccent,
                child: new Text('pink Button')),
          ],
        ),
      ),
    );
  }
}

布局Column Widget

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ListView Wdiget',
      home: Scaffold(
          appBar: new AppBar(
            title: new Text('垂直方向布局'),
          ),
          body: Column(
            // 起初文字是以最长的一段文字剧中对齐的，看起来比较别扭
            // 使用crossAxisAlignment属性进行对齐
            crossAxisAlignment: CrossAxisAlignment.center,

            // 主轴和副轴的辨识

            // mainAxisAlignment 就是主轴对齐方式

            // main轴:称为主轴，如果用Column组件，那垂直就是主轴，如果Row组件,那水平就是主轴
            // cross轴:称为副轴，是和主轴垂直的方向。Row组件，垂直就是副轴，Column组件，水平就是副轴

            // 现在要把这三段话改成垂直方向居中
            mainAxisAlignment: MainAxisAlignment.center,

            // 现在只是垂直方向居中了，要让文字相对于水平方向居中，只需要加入Center组件
            children: [
              Center(child: Text('I am Leon')),
              // 现在我们想让中间区域变大，头部区域和底部根据文字所占空间进行显示，使用Expanded
              Expanded(
                  child: Center(child: Text('Good good study,Day day up'))),
              Center(child: Text('Hello,Whati s your name?'))
            ],
          )),
    );
  }
}

Stack层叠布局

import 'package:flutter/material.dart';

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

// 放入一个图片，图片上写一些字或者放入容器，这时Row和Column是无法完成的
// Stack层叠布局
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var stack = new Stack(
      // alignment属性是控制层叠的位置的，在两个内容进行层叠时使用
      // 它有两个值X轴距离和Y轴距离，值是从0到1的
      // 都是从上层容器的左上角开始算起来的
      alignment: const FractionalOffset(0.5, 0.8),
      children: [
        // CircleAvatar经常用来作头像，里面的radius值可以设置图片的弧度
        // 放入一个图像，然后把弧度设置成100，形成一个漂亮的圆形
        new CircleAvatar(
            backgroundImage: new NetworkImage(
                'https://tse1-mm.cn.bing.net/th/id/R-C.3f7b3aeeb56cc63039f14048a35b60c6?rik=4UYkIGbT9Ix6IA&riu=http%3a%2f%2fimg.mshishang.com%2fpics%2fstar%2fcover%2fd6c99f6b120d8f7fd7ea927459a7710a.jpg&ehk=EykTsfn%2fwa2WZoHvfb6LHJLL7YsqSUWXzEgMv7wdrqs%3d&risl=&pid=ImgRaw'),
            radius: 100.0),
        new Container(
          decoration: new BoxDecoration(
            color: Colors.lightBlue,
          ),
          padding: EdgeInsets.all(5.0),
          child: new Text('Leon Lai,我爱黎明！'),
        )
      ],
    );

    return MaterialApp(
      title: 'ListView Wdiget',
      home: Scaffold(
          appBar: new AppBar(
            title: new Text('Stack层叠布局'),
          ),
          body: Center(
            child: stack,
          )),
    );
  }
}

Positioned,层叠定位组件

import 'package:flutter/material.dart';

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


class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var stack = new Stack(

      alignment: const FractionalOffset(0.5, 0.8),
      children: [
        // 超过两个组件的层叠，要用到Positioned组件，层叠定位组件(类似于CSS中的绝对定位)

        // Positioned组件的属性
        
        // button: 距离层叠组件下边的距离
        // left: 距离层叠组件左边的距离
        // top: 距离层叠组件上边的距离
        // right: 距离层叠组件右边的距离

        // width: 层叠定位组件的宽度
        // height: 层叠定位组件的高度

        new CircleAvatar(
            backgroundImage: new NetworkImage(
                'https://tse1-mm.cn.bing.net/th/id/R-C.3f7b3aeeb56cc63039f14048a35b60c6?rik=4UYkIGbT9Ix6IA&riu=http%3a%2f%2fimg.mshishang.com%2fpics%2fstar%2fcover%2fd6c99f6b120d8f7fd7ea927459a7710a.jpg&ehk=EykTsfn%2fwa2WZoHvfb6LHJLL7YsqSUWXzEgMv7wdrqs%3d&risl=&pid=ImgRaw'),
            radius: 100.0),
        // 我们把文字直接放到Positioned里
        new Positioned(
          top: 40.0,
          left: 80.0,
          child: new Text('Leon Lai')
          
        ),
        new Positioned(
          bottom: 10.0,
          right: 90.0,
          child: new Text('黎明')
          
        )
      ],
    );

    return MaterialApp(
      title: 'ListView Wdiget',
      home: Scaffold(
          appBar: new AppBar(
            title: new Text('Stack层叠布局'),
          ),
          body: Center(
            child: stack,
          )),
    );
  }
}

卡片布局

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 开发一个类似收货地址的列表，使用卡片布局
    var card = new Card(
        child: Column(
      // 使用一个垂直布局组件Column组件，然后利用ListTile实现内部列表
      children: [
        ListTile(
          title: new Text(
            '上海市松江区G60科创走廊',
            style: TextStyle(fontWeight: FontWeight.w500),
          ),
          subtitle: new Text('Leonzhao:111111111'),
          leading: new Icon(Icons.account_box, color: Colors.lightBlue),
        ),
        // 分割线
        new Divider(),
        ListTile(
          title: new Text(
            '云南省昆明市盘龙区',
            style: TextStyle(fontWeight: FontWeight.w500),
          ),
          subtitle: new Text('Leonzhao:111111111'),
          leading: new Icon(Icons.account_box, color: Colors.lightBlue),
        ),
        new Divider(),
        ListTile(
          title: new Text(
            '哈哈哈哈哈哈哈哈哈',
            style: TextStyle(fontWeight: FontWeight.w500),
          ),
          subtitle: new Text('Leonzhao:111111111'),
          leading: new Icon(Icons.account_box, color: Colors.lightBlue),
        ),
        new Divider(),
      ],
    ));
    return MaterialApp(
      title: 'ListView Wdiget',
      home: Scaffold(
          appBar: new AppBar(
            title: new Text('卡片布局'),
          ),
          body: Center(child: card)),
    );
  }
}

导航

一般页面导航和返回

RaisedButton Navigator.push Navigator.pop

// 导航的使用在任何程序里都至关重要，也是一个程序的灵魂

// 一般页面导航和返回

// RaisdButton按钮组件

// child:可以放入容器，图标，文字。构建多彩的按钮
// onPressed:点击事件的相应，一般会调用Navigator组件

// Navigator.push 和 Navigator.pop

// Navigator.push 是跳转到下一个页面，它接受两个参数一个是上下文context，另一个是要跳转的函数
// Navigator.pop  是返回到上一个页面，使用时传递一个context上下文参数(注意，你必须有上级页面，也就是上级页面使用了Navigator.push)

// 实现一个案例，一个页面上有简单的按钮，写着‘查看商品详情页面’
// 然后点击进入下一个页面，页面有一个按钮，可以直接返回

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(title: '导航演示1', home: new FirstScreen()));
}

class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text('导航页面')),
        body: Center(
            child: RaisedButton(
                child: Text('查看商品详情页面'),
                onPressed: () {
                  Navigator.push(
                      context,
                      new MaterialPageRoute(
                          builder: (context) => new SecondScreen()));
                })));
  }
}

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text('沐阳商品详情页')),
        body: Center(
          child: RaisedButton(
              child: Text('返回'),
              onPressed: () {
                Navigator.pop(context);
              }),
        ));
  }
}

导航参数的传递与接受

// 页面跳转时参数的传递和接受

// 进入一个商品选择列表，当你想选择一个商品的具体信息的时候，
// 就需要传递商品编号，详情页面接收到编号后，显示出不同的内容

// 安装Awesome Flutter snippets组件，可以快速生成很多代码片段

// 例如输入stlss就会自动生成
// class  extends StatelessWidget {
//   const ({ Key? key }) : super(key: key);

//   @override
//   Widget build(BuildContext context) {
//     return Container(

//     );
//   }
// }

import 'package:flutter/material.dart';

// 声明数据结构类

// Dart中使用类来抽象一个数据
// 模仿一个商品信息，有商品标题和商品描述

// 定义一个Product类，里面有两个字符型变量

class Product {
  final String title; // 商品标题
  final String description; // 商品描述
  Product(this.title, this.description);
}

// 构建一个商品列表
// 采用动态的构造方法
// 在主方法里传递一个商品列表(List)到自定义的Widget中

// 主路口文件，主要是在home属性中，使用了ProductList自定义组件
// 会报错是因为我们缺少这个组件
// ProductList组件传递了一个products参数，也就是商品的列表数据
// 这个数据是用List.generate生成的
// 生成的List原型就是我们刚开始定义的Product这个类(抽象数据)
void main() {
  runApp(MaterialApp(
      title: '数据传递案例',
      home: ProductList(
          products: List.generate(
              20, (index) => Product('商品 $index', '这是一个商品详情，编号为：$index')))));
}

// 先接受了主方法传递过来的参数
// 接受后用ListView.builder方法，生成了一个根据传递参数数据形成的动态列表
class ProductList extends StatelessWidget {
  final List products;

  ProductList({required this.products}) : super();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('商品列表')),
      body: ListView.builder(
          itemCount: products.length,
          itemBuilder: (context, index) {
            return ListTile(
              title: Text(products[index].title),
              // 导航参数的传递

              // 使用Navigator组件，使用路由MaterialPageRoute传递参数
              onTap: () {
                Navigator.push(
                    context,
                    MaterialPageRoute(
                        // ProductDetail报错，因为还没有声明这个组件或者这个类
                        builder: (context) =>
                            new ProductDetail(product: products[index])));
              },
            );
          }),
    );
  }
}

// 声明ProductDetail这个类(组件)，先要接收参数
class ProductDetail extends StatelessWidget {
  final Product product;
  ProductDetail({required this.product}) : super();

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: AppBar(title: Text('${product.title}')),
        body: Center(
          child: Text('${product.description}'),
        ));
  }
}

页面跳转并返回数据

// 页面跳转后，把返回结果 返回到上一个页面(父页面)
// 场景应用于去子页面选择了一个选项，然后把选择的结果返回给父级页面

// 实例场景：进入联系人列表，选择要找的联系人
// 点击后返回，在主页上显示出要找的联系人电话

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    title: '页面跳转返回数据',
    home: FirstPage(),
  ));
}

// 首页
class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text('联系人名单')),
        body: Center(
          child: RouteButton(),
        ));
  }
}

// 跳转的Button
class RouteButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      onPressed: () {
        _navigateToperson(context);
      },
      child: Text('查找联系人'),
    );
  }

  // 异步请求和等待 async...await
  // 实现一个查找联系人的方法，进行跳转
  // 等待结果回来之后，我们再显示出内容

  _navigateToperson(BuildContext context) async {
    // async 启动异步方法
    final result = await Navigator.push(
        // 等待
        context,
        MaterialPageRoute(builder: (context) => PersonNumber()));
    // SnackBar 是用户操作后，显示提示信息的控件 类似 toast， 会自动隐藏
    // SnackBar 是以Scaffold的showSnackBar方法进行显示
    Scaffold.of(context).showSnackBar(SnackBar(content: Text('$result')));
  }
}

class PersonNumber extends StatelessWidget {
  // 返回数据的方式特别容易，只需要在返回时带第二个参数就可以了
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text('联系人')),
        body: Center(
          child: Column(
            children: [
              RaisedButton(
                  child: Text('赵沐阳'),
                  onPressed: () {
                    Navigator.pop(context, '赵沐阳:15263512324');
                  }),
              RaisedButton(
                  child: Text('黎明'),
                  onPressed: () {
                    Navigator.pop(context, '黎明:3432844324324');
                  }),
              RaisedButton(
                  child: Text('任贤齐'),
                  onPressed: () {
                    Navigator.pop(context, '任贤齐:234324432124');
                  }),
            ],
          ),
        ));
  }
}

配置项目资源文件

// 配置项目资源文件，需要使用pubspec.yaml文件，在这里声明资源文件

// 在项目根目录下新建了一个images文件夹，文件夹下面放了一个图片
// 图片的名称叫做1.jpg,在pubspec.yaml文件里写如下代码声明
// assets:
//    - images/1.jpg

// 声明后，就可以直接在项目中引用这个文件了

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Image.asset('images/1.jpg'),
    );
  }
}