4-1电影海报实例代码基本结构的建立
import 'package:flutter/material.dart';
//void是没有返回值的 主方法调用MyApp 所以在此处传递数据
void main() => runApp(MyApp());
//定义一个widget
class MyApp extends StatelessWidget {
final List
// 构造方法 默认参数为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
// 构造方法 默认参数为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
// 构造方法 默认参数为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),
],
)),
);
}
}
由于使用的少 格式过于简陋 欢迎访问我本人的思否博客查看本文：https://segmentfault.com/a/1190000023072423