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

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

import 'package:flutter/material.dart';

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

//定义一个widget
class MyApp extends StatelessWidget {
  final List 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 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: [
              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 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: [
              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),
            ],
          )),
    );
  }
}