共计 4297 个字符，预计需要花费 11 分钟才能阅读完成。
3-4ImageWidget 图片组件讲解
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
//Image.asset: 加载资源图片，会使打包时包体过大
//Image.network: 网络资源图片，经常换的或者动态的图片
//image.file：本地图片，比如相机照像后的图片预览
//image.memory: 加载到内存中的图片，Uint8List
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'TextWidget',
home: Scaffold(appBar: AppBar(title: Text('TextWidget')),
body: Center(
child: Container(
child: new Image.network(
'https://img1.mukewang.com/szimg/5ef018f808c6394c06000338-360-202.jpg',
// 缩放 值越大图片越小
scale: 1.5,
// 图片充满容器 有可能被拉伸
// fit: BoxFit.fill,
// 图片保持原比例 宽或高最大
// fit: BoxFit.contain,
// 图片可能被裁切 充满容器 保持原比例 工作中非常实用 fitWidth: 横向是充满的纵向可能被裁切或拉伸 fitHeight scaleDown: 图片大于容器
// fit: BoxFit.cover,
// 图片混合模式美工会给
// color: Colors.amber,
// colorBlendMode: BlendMode.colorBurn,
// 图片重复 repeatX 横向 Y 纵向
repeat: ImageRepeat.repeat,
),
width: 300.0,
height: 200.0,
color: Colors.amber,
)),
),
);
}
}3-5ListViewWidget 列表组件讲解
1. 列表瓦片
import 'package:flutter/material.dart';
//void 是没有返回值的
void main() => runApp(MyApp());
// 定义一个 widget
class MyApp extends StatelessWidget {
// 重写 build 方法
@override
// 上下文参数
Widget build(BuildContext context) {
return MaterialApp(
title: 'TextWidget',
home: Scaffold(appBar: AppBar(title: Text('TextWidget')),
body: new ListView(
// 返回的是一个数组
children: <Widget>[
// 列表瓦片
new ListTile(
// 最主要的 flutter 提供给我们的 icon 组件
leading: new Icon(Icons.accessibility),
// 图标加文字
title: new Text('border_right',),
),
new ListTile(
// 最主要的 flutter 提供给我们的 icon 组件
leading: new Icon(Icons.accessibility),
// 图标加文字
title: new Text('border_right',),
),
new ListTile(
// 最主要的 flutter 提供给我们的 icon 组件
leading: new Icon(Icons.repeat),
// 图标加文字
title: new Text('border_right',),
),
new ListTile(
// 最主要的 flutter 提供给我们的 icon 组件
leading: new Icon(Icons.access_alarm),
// 图标加文字
title: new Text('border_right',),
)
],
)),
);
}
}2. 图片列表
import 'package:flutter/material.dart';
//void 是没有返回值的
void main() => runApp(MyApp());
// 定义一个 widget
class MyApp extends StatelessWidget {
// 重写 build 方法
@override
// 上下文参数
Widget build(BuildContext context) {
return MaterialApp(
title: 'TextWidget',
home: Scaffold(appBar: AppBar(title: Text('TextWidget')),
body: new ListView(
// 返回的是一个数组
children: <Widget>[
new Image.network('https://img1.mukewang.com/szimg/5ee0782708609a8506000338-360-202.jpg'),
new Image.network('https://img1.mukewang.com/szimg/5ed0dcff0984b5c812000676-360-202.png'),
new Image.network('https://img1.mukewang.com/szimg/5ee0782708609a8506000338-360-202.jpg'),
],
)),
);
}
}3- 6 横向列表的使用
1. 横向列表原始代码
import 'package:flutter/material.dart';
//void 是没有返回值的
void main() => runApp(MyApp());
// 定义一个 widget
class MyApp extends StatelessWidget {
// 重写 build 方法
@override
// 上下文参数
Widget build(BuildContext context) {
return MaterialApp(
title: 'TextWidget',
home: Scaffold(appBar: AppBar(title: Text('TextWidget')),
body: Center(
child: Container(
height: 200.0,
child: new ListView(
// 横向滚动
scrollDirection: Axis.horizontal,
children: <Widget>[
new Container(
width: 180.0,
color: Colors.amber,
),
new Container(
width: 180.0,
color: Colors.purple,
),
new Container(
width: 180.0,
color: Colors.lightGreen,
),
new Container(
width: 180.0,
color: Colors.black12,
),
],
),
),
)),
);
}
}2 横向列表优化代码
import 'package:flutter/material.dart';
//void 是没有返回值的
void main() => runApp(MyApp());
// 定义一个 widget
class MyApp extends StatelessWidget {
// 重写 build 方法
@override
// 上下文参数
Widget build(BuildContext context) {
return MaterialApp(
title: 'TextWidget',
home: Scaffold(appBar: AppBar(title: Text('TextWidget')),
body: Center(
child: Container(
height: 200.0,
// 调用 mylist 组件
child: Mylist()),
)),
);
}
}
//mylist 组件分解出来
class Mylist extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ListView(
// 横向滚动
scrollDirection: Axis.horizontal,
children: <Widget>[
new Container(
width: 180.0,
color: Colors.amber,
),
new Container(
width: 180.0,
color: Colors.purple,
),
new Container(
width: 180.0,
color: Colors.lightGreen,
),
new Container(
width: 180.0,
color: Colors.black12,
),
],
);
}
}3- 7 动态列表的使用
import 'package:flutter/material.dart';
//void 是没有返回值的 主方法调用 MyApp 所以在此处传递数据
void main() => runApp(MyApp(// List() 非固定长度 List(3) 长度为 3 List<String>() 指定类型 [1,2,3] 直接赋值 $i 下标
//generate 生成器 有两个参数 1. 是声明长度（i）每一个循环的参数 单个循环的内容
items: new List<String>.generate(1000, (i) => 'item $i')));
// 定义一个 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: 'TextWidget',
home: Scaffold(appBar: AppBar(title: Text('TextWidget')),
body: new ListView.builder(
itemCount: items.length,
// 上下文和索引
itemBuilder: (context, index) {return new ListTile(title: new Text('${items[index]}'));
},
)),
);
}
}
正文完
