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

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

import 'package:flutter/material.dart';//void是没有返回值的 主方法调用MyApp 所以在此处传递数据void main() => runApp(MyApp());//定义一个widgetclass 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());//定义一个widgetclass 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());//定义一个widgetclass 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),            ],          )),    );  }}