(一)效果图
垂直列表
水平列表1
水平列表2
(二)
代码实现的是图文水平列表2
实现要点:把ListView放进Container里面设置高度,
并设置好方向, scrollDirection: Axis.horizontal
垂直列表就不用这个属性了
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class ListViewPage extends StatelessWidget {
Widget ListPages() {
return Container(
height: 180,
child: ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
Container(
width: 180,
height: 180,//可以不用设置该高度,会跟随父级的高度自适应;同理垂直列表不用设置宽度。
color: Colors.red,
),
Container(
width: 180,
height: 180,
color: Colors.green,
),
Container(
width: 180,
height: 180,
color: Colors.orange,
),
Container(
width: 180,
height: 180,
color: Colors.blue,
),
],
));
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("甜宠软妹"),
centerTitle: true,
),
body: Container(
child: ListPages(),
),
);
}
}
应用场景:新闻列表
list里面的内容是可以改变的
比如放图片,图标都可以