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]}'));
},
)),
);
}
}
由于简书使用的少 格式过于简陋 欢迎访问我本人的思否博客查看本文：https://segmentfault.com/a/1190000023069731
