ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

Widget listView封装

2023-12-15 11:25:33  阅读:49  来源: 互联网

标签:


简单的封装 ListView 的示例代码:

import 'package:flutter/material.dart';

class MyListView extends StatelessWidget {
  final List<String> items;

  MyListView({required this.items});

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: items.length,
      itemBuilder: (context, index) {
        return ListTile(
          title: Text(items[index]),
        );
      },
    );
  }
}

Dart

在上面的示例中,我们创建了一个名为 MyListView 的 StatelessWidget。它接受一个名为 items 的 List 类型参数用于构建 ListView。在 build 方法中,我们使用 ListView.builder 创建一个可滚动的列表,其中 itemBuilder 参数定义了列表中每个 item 的样式和内容。

在 itemBuilder 中,我们返回一个 ListTile,其中的 title 部分是一个包含 items[index] 的 Text Widget。根据实际需求,你可以在 ListTile 中添加其他内容或样式。

然后,你可以在你的主页面或其它页面中使用 MyListView,如下所示:

MyListView(items: ["Item 1", "Item 2", "Item 3", ...]),

Dart

将需要展示的列表数据传递给 MyListView 的 items 参数即可。

标签:
来源:

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有