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横向列表的使用的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。