Flutter第六弹 基础列表ListView

这篇具有很好参考价值的文章主要介绍了Flutter第六弹 基础列表ListView。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目标:

1)Flutter有哪些常用的列表组建

2)怎么定制列表项Item?

一、ListView简介

使用标准的 ListView 构造方法非常适合只有少量数据的列表。我们还将使用内置的 ListTile widget 来给我们的条目提供可视化结构。ListView支持横向列表和纵向列表。

ListTile相当于列表项 Item,可以定制列表项内容。

例如:可以在ListView的属性children中定义 ListTile组件列表。

ListView(
  children: const <Widget>[
    ListTile(
      leading: Icon(Icons.map),
      title: Text('Map'),
    ),
    ListTile(
      leading: Icon(Icons.photo_album),
      title: Text('Album'),
    ),
    ListTile(
      leading: Icon(Icons.phone),
      title: Text('Phone'),
    ),
  ],
),

1.1 ListView属性

padding属性

padding定义控件内边距

padding: EdgeInsets.all(8.0),

children属性

children属性是定义列表项Item,是一个ListTile列表。

scrollDirection属性

ListView列表滚动方向。包括:

Axis.vertical: 竖直方向滚动,对应的是纵向列表。

  Axis.horizontal: 水平方向滚动,对应的是横向列表。

1.2 ListTile组件

常用的ListView项,包含图标,Title,文本,按钮等。

class ListTile extends StatelessWidget {

ListTile是StatelessWidget,常用的一些属性:

leading属性

标题Title之前Widget,通常是 Icon或者圆形图像CircleAvatar 组件。

ListTile(
            leading: Icon(Icons.photo_album), // 标题图片
            title: Text('Album'),
          ),

title属性

列表Item标题。

titleTextStyle属性

标题文本样式

titleAlignment属性

标题文本的对齐属性

subtitle属性

subtitle 副标题,显示位置位于标题之下。

ListTile(
            leading: Icon(Icons.photo_album), // 标题图片
            title: Text('Album'),
            subtitle: Text('手机历史相册'),
          ),

subtitleTextStyle属性

副标题文本样式

isThreeLine属性

布尔值,指示是否为三行列表项。如果为 true,则可以显示额外的文本行。否则,只有一行文本。

dense属性

是否是紧凑布局。布尔型,紧凑模式下,文本和图标的大小将减小。

textColor属性

文本颜色

contentPadding属性

内容区的内边距

enabled属性

布尔值,指示列表项是否可用。如果为 false,则列表项将不可点击

selected属性

布尔值,指示列表项是否已选择。列表选择时有效

focusColor属性

获取焦点时的背景颜色。

hoverColor属性

鼠标悬停时的背景颜色。

splashColor属性

点击列表项时的水波纹颜色。

tileColor属性

列表项的背景颜色

selectedTileColor属性

选中列表项时的背景颜色。

leadingAndTrailingTextStyle属性

前导和尾部部分文本的样式。

enableFeedback属性

是否启用触觉反馈。

horizontalTitleGap属性

标题与前导/尾部之间的水平间距。

minVerticalPadding属性

最小垂直内边距

minLeadingWidth属性

最小前导宽度

二、定制ListView的子项Item

ListView可以展现简单的列表。如果子项包括有状态更新,和原来一样,可以在State中进行状态更新。

2.1 竖直列表

Flutter第六弹 基础列表ListView,Flutter,flutter

对应的代码

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // TRY THIS: Try running your application with "flutter run". You'll see
        // the application has a purple toolbar. Then, without quitting the app,
        // try changing the seedColor in the colorScheme below to Colors.green
        // and then invoke "hot reload" (save your changes or press the "hot
        // reload" button in a Flutter-supported IDE, or press "r" if you used
        // the command line to start the app).
        //
        // Notice that the counter didn't reset back to zero; the application
        // state is not lost during the reload. To reset the state, use hot
        // restart instead.
        //
        // This works for code too, not just values: Most code changes can be
        // tested with just a hot reload.
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  // This widget is the home page of your application. It is stateful, meaning
  // that it has a State object (defined below) that contains fields that affect
  // how it looks.

  // This class is the configuration for the state. It holds the values (in this
  // case the title) provided by the parent (in this case the App widget) and
  // used by the build method of the State. Fields in a Widget subclass are
  // always marked "final".

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      // This call to setState tells the Flutter framework that something has
      // changed in this State, which causes it to rerun the build method below
      // so that the display can reflect the updated values. If we changed
      // _counter without calling setState(), then the build method would not be
      // called again, and so nothing would appear to happen.
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    // This method is rerun every time setState is called, for instance as done
    // by the _incrementCounter method above.
    //
    // The Flutter framework has been optimized to make rerunning build methods
    // fast, so that you can just rebuild anything that needs updating rather
    // than having to individually change instances of widgets.
    return Scaffold(
      appBar: AppBar(
        // TRY THIS: Try changing the color here to a specific color (to
        // Colors.amber, perhaps?) and trigger a hot reload to see the AppBar
        // change color while the other colors stay the same.
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        // Here we take the value from the MyHomePage object that was created by
        // the App.build method, and use it to set our appbar title.
        title: Text(widget.title),
      ),
      body: ListView(
        children: [
          const ListTile(
            leading: Icon(Icons.map), // 标题图片
            title: Text('Map'),
          ),
          ListTile(
            leading: Icon(Icons.photo_album), // 标题图片
            title: Text('Album'),
          ),
          ListTile(
            leading: Icon(Icons.photo_camera), // 标题图片
            title: Text('Camera'),
          ),
          ListTile(
            leading: Icon(Icons.countertops), // 标题图片
            title: Text(
              '当前计数$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

2.2 水平列表

ListView设置显示水平布局,增加属性 scrollDirection: Axis.horizontal, 则显示水平列表。文章来源地址https://www.toymoban.com/news/detail-850876.html

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    const title = 'Horizontal List';

    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: const Text(title),
        ),
        body: Container(
          margin: const EdgeInsets.symmetric(vertical: 20),
          height: 200,
          child: ListView(
            // This next line does the trick.
            scrollDirection: Axis.horizontal,
            children: <Widget>[
              Container(
                width: 160,
                color: Colors.red,
              ),
              Container(
                width: 160,
                color: Colors.blue,
              ),
              Container(
                width: 160,
                color: Colors.green,
              ),
              Container(
                width: 160,
                color: Colors.yellow,
              ),
              Container(
                width: 160,
                color: Colors.orange,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

到了这里,关于Flutter第六弹 基础列表ListView的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Flutter组件-ListView滑动到指定位置(SingleChildScrollView 实现锚点效果)

    ListView 组件默认内容比较多的时候具有延迟加载的特性。  SingleChildScrollView 不支持基于 Sliver 的延迟实例化模型,也就是使用 SingleChildScrollView  默认没有延迟加载的特性。  SingleChildScrollView 类似于 Android 中的 ScrollView,它只能接收一个子组件,由于默认没  有延迟加载

    2024年02月11日
    浏览(35)
  • Flutter实现动画列表AnimateListView

    由于业务需要,在打开列表时,列表项需要一个从右边飞入的动画效果,故封装一个专门可以执行动画的列表组件,可以自定义自己的动画,内置有水平滑动,缩放等简单动画。花里胡哨的动画效果由你自己来定制吧。 功能: 1.可自定义动画。 2.内置水平滑动和缩放动画。

    2024年02月11日
    浏览(45)
  • c++之旅——第六弹

    大家好啊,这里是c++之旅第六弹,跟随我的步伐来开始这一篇的学习吧! 如果有知识性错误,欢迎各位指正!!一起加油!! 创作不易,希望大家多多支持哦! 一,静态成员: 1.静态成员是什么: 静态成员可以在类的所有对象之间共享数据,也可以提供不依赖于类的对象的

    2024年03月18日
    浏览(37)
  • 力扣刷MySQL-第六弹(详细讲解)

     🎉欢迎您来到我的MySQL基础复习专栏 ☆* o(≧▽≦)o *☆哈喽~我是小小恶斯法克🍹 ✨博客主页: 小小恶斯法克的博客 🎈该系列文章专栏: 力扣刷题讲解-MySQL 🍹文章作者技术和水平很有限,如果文中出现错误,希望大家能指正🙏 📜 感谢大家的关注! ❤️ 目录  🚀大的

    2024年01月20日
    浏览(39)
  • C++第六弹---类与对象(三)

    ✨ 个人主页:   熬夜学编程的小林 💗 系列专栏:   【C语言详解】   【数据结构详解】 【C++详解】 目录 1、类的6个默认成员函数 2、构造函数 2.1、概念 2.2、特性 3、析构函数 3.1、概念 3.2、特性 3.3、调用顺序 总结 如果一个 类中什么成员都没有 ,简称为 空类 。 空类中

    2024年03月22日
    浏览(33)
  • leetcode数据库题第六弹

    https://leetcode.cn/problems/exchange-seats/ 嗯,今天又看了看这个题目,发现用例已经修复了。 https://leetcode.cn/problems/students-and-examinations/ 额。。。统计所有人,所有科目,各进行了几次考核。。。那么人员和科目只能最大化交叉查询了,然后再去关联考试次数。 其实指令是一拖三的

    2024年02月10日
    浏览(49)
  • C语言第六弹---分支语句(下)

    ✨ 个人主页: 熬夜学编程的小林 💗 系列专栏: 【C语言详解】 【数据结构详解】 逻辑运算符提供逻辑判断功能,用于构建更复杂的表达式,主要有下面三个运算符。 • ! :逻辑取反运算符(改变单个表达式的真假)。 • :与运算符,就是并且的意思(两侧的表达式都为

    2024年01月25日
    浏览(34)
  • Flutter一天一控件之ListTile(列表的实现)

    Flutter中的ListTile控件是一种常用的列表项控件,它可以用于显示列表中的每一个项,通常包含标题、副标题、图标等内容。ListTile控件的外观和行为类似于Android中的ListView中的列表项。 上面的代码中,我们创建了一个ListTile控件,包含一个左侧图标、一个标题、一个副标题和

    2024年02月05日
    浏览(31)
  • flutter动态渲染从服务器请求的列表数据

    比如我们从服务器请求到的列表数据,需要渲染到页面上,但是在flutter里面还是需要使用他们的ListView或者GridView或者别的组件才可以,或者有children这种属性的组件上使用。 比如我们在一个有状态的组件Lists里面,在initState的时候,发送请求获取数据,并将获取到的数据通过

    2024年01月16日
    浏览(42)
  • 深入理解数据结构第六弹——排序(3)——归并排序

    排序1:深入了解数据结构第四弹——排序(1)——插入排序和希尔排序-CSDN博客 排序2:深入理解数据结构第五弹——排序(2)——快速排序-CSDN博客 前言: 在前面,我们已经学习了插入排序、堆排序、快速排序等一系列排序,今天我们来讲解一下另一个很高效的排序方法

    2024年04月17日
    浏览(59)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包