3-4ImageWidget图片组件讲解
import 'package:flutter/material.dart';void main() => runApp(MyApp());//Image.asset:加载资源图片，会使打包时包体过大//Image.network:网络资源图片，经常换的或者动态的图片//image.file：本地图片，比如相机照像后的图片预览//image.memory:加载到内存中的图片，Uint8Listclass 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());//定义一个widgetclass 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());//定义一个widgetclass 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());//定义一个widgetclass 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());//定义一个widgetclass 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')));//定义一个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: '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]}')); }, )), ); }}