Flutter 列表【代码实践】

本是古典何须时尚 2023-10-12 08:54 54阅读 0赞

# Flutter 列表【代码实践】 #

### 文章目录 ###

*  Flutter 列表【代码实践】
 *  一、自定义列表
 *   *  1、自定义列表项
     *   *  截图
         *  代码

# 一、自定义列表 #

## 1、自定义列表项 ##

### 截图 ###

![image-20230602001952282][]

### 代码 ###

import 'package:flutter/material.dart';
    
    class TestPage extends StatelessWidget {
        
      @override
      Widget build(BuildContext context) {
        
        return Scaffold(
          appBar: AppBar(
            title: Text('Test Page'),
          ),
          body: Container(
            child: ListView.builder(
              itemCount: 30,
              itemBuilder: (context, index) {
        
                if (index == 0) {
        
                  return Container(
                    height: 200,
                    color: Colors.red,
                  );
                } else if (index == 1) {
        
                  return Container(
                    height: 200,
                    color: Colors.blue,
                  );
                } else {
        
                  return ListTile(
                    title: Text('Item $index'),
                  );
                }
              },
            )
          ),
        );
      }
    }

[image-20230602001952282]: https://gudu2019.oss-cn-beijing.aliyuncs.com/mdimg/image-20230602001952282.png

发表评论取消回复

表情：

评论列表（有 0 条评论，54人围观）

还没有评论，来说两句吧...

相关阅读

相关 Flutter实现动画列表AnimateListView

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

╰半橙微兮°/ 2024年03月24日 20:45/ 0 赞/ 84 阅读

相关 Flutter 列表【代码实践】

Flutter 列表【代码实践】文章目录 Flutter 列表【代码实践】一、自定义列表 1、自定义列表项截图

本是古典何须时尚/ 2023年10月12日 08:54/ 0 赞/ 55 阅读

相关 Flutter 对话框【代码实践】

Flutter 对话框【代码实践】文章目录 Flutter 对话框【代码实践】一、普通对话框 1、示例一：圆角、背景

快来打我*/ 2023年10月12日 08:53/ 0 赞/ 54 阅读

相关【Flutter 工程】005-代码分离实践：flutter_hooks & functional_widget

【Flutter 工程】005-代码分离实践：flutter\_hooks & functional\_widget 文章目录【Flutter 工程】005

我就是我/ 2023年10月10日 22:59/ 0 赞/ 34 阅读

相关 Flutter 滚动列表 ListView 图文示例

文章目录 ListView、ListView.builder ListView 使用 List

淡淡的烟草味﹌/ 2023年07月16日 11:56/ 0 赞/ 149 阅读

相关 Flutter学习记录——9.列表滚动

文章目录 1.CustomScrollView Widget 2.ListView Widget 3.GridView Widget 4.Scro

水深无声/ 2023年06月19日 02:30/ 0 赞/ 25 阅读

相关 Android/flutter 获取天气列表

这个需求我是在flutter上实现的不过Android端也一样这个我给大家推荐知心天气接口:心知天气 ulr:https://api.seniverse.com/

绝地灬酷狼/ 2022年10月10日 04:55/ 0 赞/ 188 阅读

相关 Flutter实践-02

Flutter实践-02 布局Demo import 'package:flutter/material.dart'; import 'dart:i

ゝ一纸荒年。/ 2022年02月28日 07:58/ 0 赞/ 174 阅读

相关 Flutter实践-01

Flutter实战-01 Demo import 'package:flutter/material.dart'; void main()

偏执的太偏执、/ 2022年02月28日 07:58/ 0 赞/ 220 阅读

相关 Flutter学习笔记（12）--列表组件

如需转载，请注明出处：[Flutter学习笔记（12）--列表组件][Flutter_12_--] 在日常的产品项目需求中，经常会有列表展示类的需求，在Android中

- 日理万妓/ 2021年11月17日 08:12/ 0 赞/ 406 阅读