P10. Flutter ListView横向列表的使用
目录
已经对 ListView 有了清楚的认识,也做出了普通的纵向(竖向列表)。本文我们看看横向列表如何使用。其实还是使用我们的 ListView 组件,只是在ListView
组件里加一个ScrollDirection
属性。
制作横向列表
这个我们先来看代码,然后再具体讲解使用方法:
import 'package:flutter/material.dart'; void main () => runApp(MyApp()); class MyApp extends StatelessWidget{ @override Widget build(BuildContext context ){ return MaterialApp( title:'Text widget', home:Scaffold( body:Center( child:Container( height:200.0, child:ListView( scrollDirection: Axis.horizontal, children: [ Container( width:180.0, color: Colors.lightBlue, ), Container( width:180.0, color: Colors.amber, ), Container( width:180.0, color: Colors.deepOrange, ), Container( width:180.0, color: Colors.deepPurpleAccent, ), ], ) ), ), ), ); } }
我们先是加入了 Center 组件,作用是让我们的横向列表可以居中到屏幕的中间位置,然后在 center 组件的下面加入了 Container 容器组件,并设置了容器组件的高是 200,在容器组件里我们加入了ListView
组件,然后设置了组件的 scrollDirection 属性。然后再 ListView 的子组件里加入了 Container 容器组件,然后设置了不同颜色,效果如图。
scrollDirection 属性
ListView 组件的scrollDirection
属性只有两个值,一个是横向滚动,一个是纵向滚动。默认的就是垂直滚动,所以如果是垂直滚动,我们一般都不进行设置。
Axis.horizontal
:横向滚动或者叫水平方向滚动。Axis.vertical
:纵向滚动或者叫垂直方向滚动。
优化代码
现在把列表组件独立定义成一个类,然后我们再加入到主组件中。在工作中会把组件分的很细,这样既能很好的复用有便于维护,还有利于分工,我个人是非常喜欢 Flutter 这种万物皆组件的形式的。
我们声明一个 MyList 的类,然后把嵌套的代码放到这个类里,代码如下。
class MyList extends StatelessWidget{ @override Widget build(BuildContext context){ return ListView( scrollDirection: Axis.horizontal, children: [ Container( width:180.0, color: Colors.lightBlue, ), Container( width:180.0, color: Colors.amber, ), Container( width:180.0, color: Colors.deepOrange, ), Container( width:180.0, color: Colors.deepPurpleAccent, ), ], ); } }
然后再 MyAPP 类里直接使用这个类,这样就减少了嵌套。全部代码如下:
import 'package:flutter/material.dart'; void main () => runApp(MyApp()); class MyApp extends StatelessWidget{ @override Widget build(BuildContext context ){ return MaterialApp( title:'ListView widget', home:Scaffold( body:Center( child:Container( height:200.0, child:MyList() ), ), ), ); } } class MyList extends StatelessWidget{ @override Widget build(BuildContext context){ return ListView( scrollDirection: Axis.horizontal, children: [ Container( width:180.0, color: Colors.lightBlue, ), Container( width:180.0, color: Colors.amber, ), Container( width:180.0, color: Colors.deepOrange, ), Container( width:180.0, color: Colors.deepPurpleAccent, ), ], ); } }
以上就是今天全部内容,主要就是学一下横向列表如何制作和如何减少嵌套,希望小伙伴们都能有所收获。
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » P10. Flutter ListView横向列表的使用
码云笔记 » P10. Flutter ListView横向列表的使用