Flutter学习笔记05-3分钟学会使用ListView组件

原创已于 2022-11-08 22:43:31 修改 · 123 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#flutter #学习

于 2022-11-04 12:13:45 首次发布

Flutter学习笔记专栏收录该内容

19 篇文章

订阅专栏

本文介绍如何使用 Flutter 中的 ListView 控件来创建垂直和水平滚动列表。通过实例展示了基本的 ListView 使用方法，包括如何添加列表项、分割线以及如何设置水平滚动。

学习视频地址：https://www.bilibili.com/video/BV1S4411E7LY?p=24&spm_id_from=pageDriver&vd_source=cee744cae4ead27f8193fc7904647073

视频内容学习笔记：
1.初步使用ListView

import 'package:first_flutter_app/myIcon.dart';
import 'package:flutter/material.dart';

void main() {
  //const : 多个相同的实例共享存储空间
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(primarySwatch: Colors.blue),
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Flutter ICON"),
        ),
        body: const MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: <Widget>[
        ListTile(
          title: Text("我是一个列表"),
        ),
        Divider(),
        ListTile(
          title: Text("我是一个列表"),
        ),
        Divider(),
        ListTile(
          title: Text("我是一个列表"),
        ),
        Divider(),
        ListTile(
          title: Text("我是一个列表"),
        ),
        Divider(),
        ListTile(
          title: Text("我是一个列表"),
        ),
        Divider(),
        ListTile(
          title: Text("我是一个列表"),
        ),
        Divider(),
        ListTile(
          title: Text("我是一个列表"),
        ),
        Divider(),
        ListTile(
          title: Text("我是一个列表"),
        ),
        Divider(),
        ListTile(
          title: Text("我是一个列表"),
        ),
        Divider(),
        ListTile(
          title: Text("我是一个列表"),
        ),
        Divider(),
        ListTile(
          title: Text("我是一个列表"),
        ),
        Divider(),
        ListTile(
          title: Text("我是一个列表"),
        ),
        Divider(),
        ListTile(
          title: Text("我是一个列表"),
        ),
        Divider(),
        ListTile(
          title: Text("我是一个列表"),
        ),
        Divider(),
      ],
    );
  }
}

这是一个可以上下滑动的列表
效果图如下👇
在这里插入图片描述
Divider()是分割线

2.使用ListTile，实现一个用户中心的布局
修改MyHomePage

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: <Widget>[
        ListTile(
          leading: Icon(
            Icons.reorder_sharp,
            color: Colors.red,
          ),
          title: Text("全部订单"),
        ),
        Divider(),
        ListTile(
          leading: Icon(
            Icons.my_library_books_rounded,
            color: Colors.green,
          ),
          title: Text("待付款"),
        ),
        Divider(),
        ListTile(
          leading: Icon(Icons.supervised_user_circle),
          title: Text("在线客服"),
          trailing: Icon(Icons.chevron_right),
        ),
      ],
    );
  }
}

显示效果。我的审美还可以吧😄
在这里插入图片描述

3.上面都是竖直列表，下面写一个水平列表👇

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 200,
      child: ListView(
        scrollDirection: Axis.horizontal,
        children: <Widget>[
          Container(
            width: 50,
            decoration: BoxDecoration(color: Colors.red),
            child: Text("1"),
          ),
          Container(
            width: 50,
            decoration: BoxDecoration(color: Colors.orange),
            child: Text("2"),
          ),
          Container(
            width: 50,
            decoration: BoxDecoration(color: Colors.yellow),
            child: Text("3"),
          ),
          Container(
            width: 50,
            decoration: BoxDecoration(color: Colors.green),
            child: Text("4"),
          ),
          Container(
            width: 50,
            decoration: BoxDecoration(color: Colors.cyan),
            child: Text("5"),
          ),
          Container(
            width: 50,
            decoration: BoxDecoration(color: Colors.blue),
            child: Text("6"),
          ),
          Container(
            width: 50,
            decoration: BoxDecoration(color: Colors.purple),
            child: Text("7"),
          ),
          Container(
            width: 50,
            decoration: BoxDecoration(color: Colors.red),
            child: Text("1"),
          ),
          Container(
            width: 50,
            decoration: BoxDecoration(color: Colors.orange),
            child: Text("2"),
          ),
          Container(
            width: 50,
            decoration: BoxDecoration(color: Colors.yellow),
            child: Text("3"),
          ),
          Container(
            width: 50,
            decoration: BoxDecoration(color: Colors.green),
            child: Text("4"),
          ),
          Container(
            width: 50,
            decoration: BoxDecoration(color: Colors.cyan),
            child: Text("5"),
          ),
          Container(
            width: 50,
            decoration: BoxDecoration(color: Colors.blue),
            child: Text("6"),
          ),
          Container(
            width: 50,
            decoration: BoxDecoration(color: Colors.purple),
            child: Text("7"),
          ),
        ],
      ),
    );
  }
}