P10. Flutter ListView横向列表的使用

目录
文章目录隐藏
  1. 制作横向列表
  2. scrollDirection 属性
  3. 优化代码

已经对 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横向列表的使用

发表回复