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

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