flutter循环

flutter for循环:

dart 复制代码
Wrap(
     children: <Widget>[
         for (int i = 0; i < (xx.yy.data?.items?.length ?? 0); i++)
            TextButton(onPressed: (){}, child: Text("${xx.yy.data?.items?[i].name.toString()} (${xx.yy.data?.items?[i].connId.toString()}) "))
    ],
);

另一种方法:

dart 复制代码
import 'package:flutter/material.dart';
import './fonts.dart';
import 'package:flutter_basic/res/listData.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: const Text('hello flutter'),
      ),
      body: const Myapp(),
    ),
  ));
}

class Myapp extends StatelessWidget {
  const Myapp({Key? key}) : super(key: key);
  
  /// 定义组件
  /// 第一种方法:for循环
  // List<Widget> _initListData() {
  //   List<Widget> tempList = [];
  //   for (var i = 0; i < listData.length; i++) {
  //     tempList.add(ListTile(
  //       leading: Image.network("${listData[i]["imageUrl"]}"),
  //       title: Text("${listData[i]["title"]}"),
  //       subtitle: Text("${listData[i]["author"]}"),
  //     ));
  //   }
  //   return tempList;
  // }


  ///第二种方法:map
  List<Widget> _initListData() {
    var tempList = listData.map((e) {
      return ListTile(
        leading: Image.network("${e["imageUrl"]}"),
        title: Text("${e["title"]}"),
        subtitle: Text("${e["author"]}"),
      );
    });
    return tempList.toList();
  }

  @override
  Widget build(BuildContext context) {
    print(listData);
    return ListView(
      children: _initListData(),///使用
    );
  }
}

使用ListView提供的builder构造函数来生成一个动态列表,在builder里需要传人两个必传参数itemCount、itemBuilder

dart 复制代码
class Myapp extends StatelessWidget {
  const Myapp({Key? key}) : super(key: key);

  ///使用ListView提供的builder构造函数来生成一个动态列表
  /// 在builder里需要传人两个必传参数itemCount、itemBuilder

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
        itemCount: listData.length,
        itemBuilder: (context, index) {
          return ListTile(
           leading: Image.network("${listData[index]["imageUrl"]}"),
            title: Text("${listData[index]["title"]}"),
            subtitle: Text("${listData[index]["author"]}"),
          );
        });
  }
}
相关推荐
半点寒12W2 分钟前
微信小程序实现路由拦截的方法
前端
某公司摸鱼前端1 小时前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app
要加油哦~1 小时前
vue | 插件 | 移动文件的插件 —— move-file-cli 插件 的安装与使用
前端·javascript·vue.js
小林学习编程1 小时前
Springboot + vue + uni-app小程序web端全套家具商场
前端·vue.js·spring boot
柳鲲鹏1 小时前
WINDOWS最快布署WEB服务器:apache2
服务器·前端·windows
weixin-a153003083162 小时前
【playwright篇】教程(十七)[html元素知识]
java·前端·html
ai小鬼头3 小时前
AIStarter最新版怎么卸载AI项目?一键删除操作指南(附路径设置技巧)
前端·后端·github
wen's3 小时前
React Native 0.79.4 中 [RCTView setColor:] 崩溃问题完整解决方案
javascript·react native·react.js
一只叫煤球的猫3 小时前
普通程序员,从开发到管理岗,为什么我越升职越痛苦?
前端·后端·全栈
vvilkim3 小时前
Electron 自动更新机制详解:实现无缝应用升级
前端·javascript·electron