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,
          ),
        ],
    );
  }
}

以上就是今天全部内容,主要就是学一下横向列表如何制作和如何减少嵌套,希望小伙伴们都能有所收获。

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有资源及文章均来源于网络及用户分享或为本站原创,仅限用于学习和研究,任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » P10. Flutter ListView横向列表的使用

发表评论

IT互联网行业相关广告投放 更专业 更精准

立即查看 联系我们