flutter学习笔记三慕课技术胖老师听课笔记

4- 1 电影海报实例代码基本结构的建立

import 'package:flutter/material.dart';

//void 是没有返回值的 主方法调用 MyApp 所以在此处传递数据
void main() => runApp(MyApp());

// 定义一个 widget
class MyApp extends StatelessWidget {
  final List<String> items;
//  构造方法 默认参数为 key 主键直接带上 调用父类
  MyApp({Key key, @required this.items}) : super(key: key);
//  重写 build 方法
  @override
//  上下文参数
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '电影海报实例',
      home: Scaffold(
        appBar: AppBar(title: Text('电影海报实例'),
        ),
          body: new Text('电影海报实例')
      ),
    );
  }
}

4- 2 电影海报实例代码 GridViewWidget 学习

import 'package:flutter/material.dart';

//void 是没有返回值的 主方法调用 MyApp 所以在此处传递数据
void main() => runApp(MyApp());

// 定义一个 widget
class MyApp extends StatelessWidget {
  final List<String> items;
//  构造方法 默认参数为 key 主键直接带上 调用父类
  MyApp({Key key, @required this.items}) : super(key: key);
//  重写 build 方法
  @override
//  上下文参数
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '电影海报实例',
      home: Scaffold(
          appBar: AppBar(title: Text('电影海报实例'),
          ),
//          网格 GridView.count 意思是我们要设置每一行的列数
          body: GridView.count(
//            内边距 需要调用 EdgeInset 组件
            padding: const EdgeInsets.all(10.0),
//            外边距
            crossAxisSpacing: 10.0,
//            列数
            crossAxisCount: 3,
            children: <Widget>[const Text('iloveimooc'),
              const Text('iloveimooc'),
              const Text('iloveimooc'),
              const Text('iloveimooc'),
              const Text('iloveimooc'),
            ],
          )),
    );
  }
}

4-3 电影海报图片的加入与课程总结

import 'package:flutter/material.dart';

//void 是没有返回值的 主方法调用 MyApp 所以在此处传递数据
void main() => runApp(MyApp());

// 定义一个 widget
class MyApp extends StatelessWidget {
  final List<String> items;
//  构造方法 默认参数为 key 主键直接带上 调用父类
  MyApp({Key key, @required this.items}) : super(key: key);
//  重写 build 方法
  @override
//  上下文参数
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '电影海报实例',
      home: Scaffold(
          appBar: AppBar(title: Text('电影海报实例'),
          ),
//          网格 GridView.count 意思是我们要设置每一行的列数
          body: GridView(
// 网格的内容 SliverGridDelegateWithFixedCrossAxisCount 可以设置列数
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
//           一行有几列
                crossAxisCount: 3,
//            外边距 行的间距
                mainAxisSpacing: 2.0,
//            列之间的间距
                crossAxisSpacing: 2.0,
//            长宽比 1 正方形  宽和长的比
                childAspectRatio: .7),
            children: <Widget>[
              new Image.network(
                  'https://img2.mukewang.com/szimg/5ef018f808c6394c06000338-360-202.jpg',
                  fit: BoxFit.cover),
              new Image.network(
                  'https://img1.mukewang.com/szimg/5ee0782708609a8506000338-360-202.jpg',
                  fit: BoxFit.cover),
              new Image.network(
                  'https://img1.mukewang.com/szimg/5ed0bbc908af61c706000338-360-202.jpg',
                  fit: BoxFit.cover),
              new Image.network(
                  'https://img2.mukewang.com/szimg/5ef018f808c6394c06000338-360-202.jpg',
                  fit: BoxFit.cover),
              new Image.network(
                  'https://img1.mukewang.com/szimg/5ee0782708609a8506000338-360-202.jpg',
                  fit: BoxFit.cover),
              new Image.network(
                  'https://img1.mukewang.com/szimg/5ed0bbc908af61c706000338-360-202.jpg',
                  fit: BoxFit.cover),
              new Image.network(
                  'https://img2.mukewang.com/szimg/5ef018f808c6394c06000338-360-202.jpg',
                  fit: BoxFit.cover),
              new Image.network(
                  'https://img1.mukewang.com/szimg/5ee0782708609a8506000338-360-202.jpg',
                  fit: BoxFit.cover),
              new Image.network(
                  'https://img1.mukewang.com/szimg/5ed0bbc908af61c706000338-360-202.jpg',
                  fit: BoxFit.cover),
            ],
          )),
    );
  }
}