Flutter开发(四)—— ListView控件介绍了ListView的简单用法,这里配了一张动态图片,看下ListView横向的效果。手机上跑的效果是非常丝滑的(跟原生没有任何区别),这里使录制14帧/秒(控制图片体积)。
以下代码结构很简单,但是为了证实flutter的View编写也可以分代码,所以进行了简单封装:
1、将整个View代码到了ViewShow中;
2、将ListView代码提到了horizontalList中;
3、将Listview的每个条目提到了ListItem中。
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: ViewShow(),
);
}
}
// 展示布局
class ViewShow extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: new AppBar(
title: new Text("ListView"),
backgroundColor: Colors.black45), // Bar 背景设置为灰色
body: Center(
child: Container(
height: 500, //Container的高度 默认就是ListView高度
child: horizontalList(), //调用ListView
),
),
);
}
}
// 展示ListView
class horizontalList extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ListView(
scrollDirection: Axis.horizontal, //设置为横向,默认使纵向
children: <Widget>[
new ListItem(context,
"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1381175915,2452671132&fm=200&gp=0.jpg"),
new ListItem(context,
"https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1486063646,2273285260&fm=200&gp=0.jpg"),
new ListItem(context,
"https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=174198655,918435950&fm=200&gp=0.jpg"),
new ListItem(context,
"https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2970139869,654827709&fm=200&gp=0.jpg"),
new ListItem(context,
"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=768870055,119193172&fm=200&gp=0.jpg"),
],
);
}
}
//ListView 的 子item
class ListItem extends StatelessWidget {
String image_url;
ListItem(BuildContext mContext, String url) {
image_url = url;
}
@override
Widget build(BuildContext context) {
final size = MediaQuery.of(context).size; //获取设备屏幕长宽
print("--------------$size"); //我的设备宽 360.0 720.0
final width = size.width;
final height = size.height;
// TODO: implement build
return new Container(
width: width, // 全屏宽度
child: Container(
margin: EdgeInsets.all(10),
decoration: new BoxDecoration(
border: Border.all(color: Colors.yellow, width: 3.0), //边框
borderRadius: new BorderRadius.all(new Radius.circular(20.0)), //倒圆角
image: DecorationImage(
image: NetworkImage(image_url), fit: BoxFit.cover))), //背景图片、图片展示方式
);
}
}