📜  Flutter – 水平列表

📅  最后修改于: 2021-09-23 06:20:29             🧑  作者: Mango

在Flutter中可以有两种类型的列表,即水平列表和垂直列表。这两个列表都是使用ListView构造函数创建的,并分配了scrollDirection参数。默认情况下,垂直列表的滚动方向参数是垂直的,但可以通过向其传递水平参数来覆盖它。

此处使用的 ListView 构造函数:

ListView(
{Key key,
Axis scrollDirection: Axis.vertical,
bool reverse: false,
ScrollController controller,
bool primary,
ScrollPhysics physics,
bool shrinkWrap: false,
EdgeInsetsGeometry padding,
double itemExtent,
bool addAutomaticKeepAlives: true,
bool addRepaintBoundaries: true,
bool addSemanticIndexes: true,
double cacheExtent,
List children: const [],
int semanticChildCount,
DragStartBehavior dragStartBehavior: DragStartBehavior.start,
ScrollViewKeyboardDismissBehavior keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.manual,
String restorationId,
Clip clipBehavior: Clip.hardEdge}
)



ListView 小部件的关键属性:

  • childrenDelegate:该属性以SliverChildDelegate类为对象。它为Listview提供了一个子代理。
  • itemeExtent: itemExtent属性接受一个double值作为对象来设置ListView的可滚动区域的范围

在本文中,我们将研究创建水平列表的过程。出于同样的目的,我们将设计一个简单的应用程序,在水平方向上显示超级英雄的图像列表。为此,我们需要按照以下步骤操作:

  • 创建一个 statelessWidget(比如 Myapp)
  • 添加脚手架小部件以容纳容器
  • 在 ListView 构造函数中添加包含图像的容器

需要注意的是,应用程序中使用的所有图像都将存储在assets/images文件夹中,如下所示:

资产

此外,需要在pubspec.yaml文件中声明资产依赖,如下所示:

pubspec.yaml 文件

现在让我们详细研究它们。

创建一个 statelessWidget:

使用以下代码创建一个为应用程序提供基本结构的有状态小部件:

Dart
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final title = 'GeeksForGeeks';
 
    return MaterialApp()


Dart
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final title = 'GeeksForGeeks';
 
    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: Text(title),
        )


Dart
ListView(
           scrollDirection: Axis.horizontal,
           children: [
             Container(
               height: 480.0,
               width: 240.0,
               decoration: BoxDecoration(
                 image: DecorationImage(
                   image: AssetImage(
                       'assets/images/aquaman.png'),
                   fit: BoxFit.fill,
                 ),
                 shape: BoxShape.rectangle,
               ),
             ),
             Container(
               height: 480.0,
               width: 240.0,
               decoration: BoxDecoration(
                 image: DecorationImage(
                   image: AssetImage(
                       'assets/images/greenlantern.webp'),
                   fit: BoxFit.fill,
                 ),
                 shape: BoxShape.rectangle,
               ),
             ),
             Container(
               height: 240.0,
               width: 240.0,
               decoration: BoxDecoration(
                 image: DecorationImage(
                   image: AssetImage(
                       'assets/images/batman.jpg'),
                   fit: BoxFit.fill,
                 ),
                 shape: BoxShape.rectangle,
               ),
             ),
             Container(
               height: 480.0,
               width: 240.0,
               decoration: BoxDecoration(
                 image: DecorationImage(
                   image: AssetImage(
                       'assets/images/superman.jpg'),
                   fit: BoxFit.fill,
                 ),
                 shape: BoxShape.rectangle,
               ),
             ),
             Container(
               height: 480.0,
               width: 240.0,
               decoration: BoxDecoration(
                 image: DecorationImage(
                   image: AssetImage(
                       'assets/images/wonderwomen.jpg'),
                   fit: BoxFit.fill,
                 ),
                 shape: BoxShape.rectangle,
               ),
             ),
           ],
 
         ),


Dart
import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final title = 'GeeksForGeeks';
 
    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: Text(title),
          backgroundColor: Colors.green,
        ),
        body: Container(
          margin: EdgeInsets.symmetric(vertical: 20.0),
          height: 550.0,
          child: ListView(
            scrollDirection: Axis.horizontal,
            children: [
              Container(
                height: 480.0,
                width: 240.0,
                decoration: BoxDecoration(
                  image: DecorationImage(
                    image: AssetImage(
                        'assets/images/aquaman.png'),
                    fit: BoxFit.fill,
                  ),
                  shape: BoxShape.rectangle,
                ),
              ),
              Container(
                height: 480.0,
                width: 240.0,
                decoration: BoxDecoration(
                  image: DecorationImage(
                    image: AssetImage(
                        'assets/images/greenlantern.webp'),
                    fit: BoxFit.fill,
                  ),
                  shape: BoxShape.rectangle,
                ),
              ),
              Container(
                height: 240.0,
                width: 240.0,
                decoration: BoxDecoration(
                  image: DecorationImage(
                    image: AssetImage(
                        'assets/images/batman.jpg'),
                    fit: BoxFit.fill,
                  ),
                  shape: BoxShape.rectangle,
                ),
              ),
              Container(
                height: 480.0,
                width: 240.0,
                decoration: BoxDecoration(
                  image: DecorationImage(
                    image: AssetImage(
                        'assets/images/superman.jpg'),
                    fit: BoxFit.fill,
                  ),
                  shape: BoxShape.rectangle,
                ),
              ),
              Container(
                height: 480.0,
                width: 240.0,
                decoration: BoxDecoration(
                  image: DecorationImage(
                    image: AssetImage(
                        'assets/images/wonderwomen.jpg'),
                    fit: BoxFit.fill,
                  ),
                  shape: BoxShape.rectangle,
                ),
              ),
            ],
 
          ),
        ),
      ),
    );
  }
}


添加脚手架小部件:

要在 statelessWidget 中添加脚手架小部件,请使用以下技术:

Dart

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final title = 'GeeksForGeeks';
 
    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: Text(title),
        )

使用容器创建 ListView:

可以按如下方式创建一个带有容器的简单 ListView:

Dart

ListView(
           scrollDirection: Axis.horizontal,
           children: [
             Container(
               height: 480.0,
               width: 240.0,
               decoration: BoxDecoration(
                 image: DecorationImage(
                   image: AssetImage(
                       'assets/images/aquaman.png'),
                   fit: BoxFit.fill,
                 ),
                 shape: BoxShape.rectangle,
               ),
             ),
             Container(
               height: 480.0,
               width: 240.0,
               decoration: BoxDecoration(
                 image: DecorationImage(
                   image: AssetImage(
                       'assets/images/greenlantern.webp'),
                   fit: BoxFit.fill,
                 ),
                 shape: BoxShape.rectangle,
               ),
             ),
             Container(
               height: 240.0,
               width: 240.0,
               decoration: BoxDecoration(
                 image: DecorationImage(
                   image: AssetImage(
                       'assets/images/batman.jpg'),
                   fit: BoxFit.fill,
                 ),
                 shape: BoxShape.rectangle,
               ),
             ),
             Container(
               height: 480.0,
               width: 240.0,
               decoration: BoxDecoration(
                 image: DecorationImage(
                   image: AssetImage(
                       'assets/images/superman.jpg'),
                   fit: BoxFit.fill,
                 ),
                 shape: BoxShape.rectangle,
               ),
             ),
             Container(
               height: 480.0,
               width: 240.0,
               decoration: BoxDecoration(
                 image: DecorationImage(
                   image: AssetImage(
                       'assets/images/wonderwomen.jpg'),
                   fit: BoxFit.fill,
                 ),
                 shape: BoxShape.rectangle,
               ),
             ),
           ],
 
         ),

现在我们已经设计了应用程序的所有基本组件,是时候将它们集成到一个完整的应用程序中了,如下所示:

完整的源代码:

Dart

import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final title = 'GeeksForGeeks';
 
    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: Text(title),
          backgroundColor: Colors.green,
        ),
        body: Container(
          margin: EdgeInsets.symmetric(vertical: 20.0),
          height: 550.0,
          child: ListView(
            scrollDirection: Axis.horizontal,
            children: [
              Container(
                height: 480.0,
                width: 240.0,
                decoration: BoxDecoration(
                  image: DecorationImage(
                    image: AssetImage(
                        'assets/images/aquaman.png'),
                    fit: BoxFit.fill,
                  ),
                  shape: BoxShape.rectangle,
                ),
              ),
              Container(
                height: 480.0,
                width: 240.0,
                decoration: BoxDecoration(
                  image: DecorationImage(
                    image: AssetImage(
                        'assets/images/greenlantern.webp'),
                    fit: BoxFit.fill,
                  ),
                  shape: BoxShape.rectangle,
                ),
              ),
              Container(
                height: 240.0,
                width: 240.0,
                decoration: BoxDecoration(
                  image: DecorationImage(
                    image: AssetImage(
                        'assets/images/batman.jpg'),
                    fit: BoxFit.fill,
                  ),
                  shape: BoxShape.rectangle,
                ),
              ),
              Container(
                height: 480.0,
                width: 240.0,
                decoration: BoxDecoration(
                  image: DecorationImage(
                    image: AssetImage(
                        'assets/images/superman.jpg'),
                    fit: BoxFit.fill,
                  ),
                  shape: BoxShape.rectangle,
                ),
              ),
              Container(
                height: 480.0,
                width: 240.0,
                decoration: BoxDecoration(
                  image: DecorationImage(
                    image: AssetImage(
                        'assets/images/wonderwomen.jpg'),
                    fit: BoxFit.fill,
                  ),
                  shape: BoxShape.rectangle,
                ),
              ),
            ],
 
          ),
        ),
      ),
    );
  }
}

输出:

想要一个更快节奏和更具竞争力的环境来学习 Android 的基础知识吗?
单击此处前往由我们的专家精心策划的指南,旨在让您立即做好行业准备!