flutter 中循环渲染组件

朴灿烈づ我的快乐病毒、 2021-09-10 08:16 280阅读 0赞

import 'package:flutter/material.dart';
    
    class Example extends StatefulWidget {
        @override
        _ExampleState createState() => _ExampleState();
    }
    
    class _ExampleState extends State<ExamplePage> {
        List formList;
        initState() {
          super.initState();
            formList = [
                {"title": '车牌号'},
                {"title": '所有人'},
                {"title": '号牌颜色'},
            ];
        }
         Widget buildGrid() {
                List<Widget> tiles = [];//先建一个数组用于存放循环生成的widget
                Widget content; //单独一个widget组件，用于返回需要生成的内容widget
                for(var item in formList) {
                    tiles.add(
                        new Row(
                           children: <Widget>[
                             new Text(item['title'])
                           ]
                        )
                    );
                }
                content = new Column(
                    children: tiles //重点在这里，因为用编辑器写Column生成的children后面会跟一个<Widget>[]，
                    //此时如果我们直接把生成的tiles放在<Widget>[]中是会报一个类型不匹配的错误，把<Widget>[]删了就可以了
                );
                return content;
            }
          Widget ExampleWidget = buildGrid();
        @override
        Widget build(BuildContext context) {
            return Scaffold(
                key: scaffoldKey,
                appBar: AppBar(
                    title: Text('循环渲染组件案例'),
                ),
                body: new Center(
                    child: ExampleWidget
                )
            );
        }
    }

发表评论取消回复

表情：

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

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

相关阅读

相关循环表格 for循环表格动态渲染

这样比较省代码量组件1 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6

系统管理员/ 2023年01月09日 12:58/ 0 赞/ 154 阅读

相关 uni-app中如何重新渲染子组件

uni-app中如何重新渲染子组件 this.hackReset = false; this.$nextTick(() => {

本是古典何须时尚/ 2022年12月10日 08:58/ 0 赞/ 910 阅读

相关 Vue动态组件渲染

子组件封装动态切换的子组件一 <template> <div> 我是多行文本框{ { config.name }

今天药忘吃喽~/ 2022年11月10日 05:38/ 0 赞/ 188 阅读

相关 Flutter 渲染树

文章目录基础知识 Widget RenderObject Element WidgetTree

柔情只为你懂/ 2022年10月30日 04:27/ 0 赞/ 131 阅读

相关 vue中动态渲染组件的方法

在项目中，我们会经常遇到动态加载不同组件（内容）的场景，也就是想通过一个页面，根据不同的参数或者条件，来加载不同的内容。那在vue里，给大家提供了一个很简单的方法，使用comp

左手的ㄟ右手/ 2021年09月30日 13:18/ 0 赞/ 1014 阅读

相关 flutter 中循环渲染组件

import 'package:flutter/material.dart'; class Example extends StatefulWidge

朴灿烈づ我的快乐病毒、/ 2021年09月10日 08:16/ 0 赞/ 281 阅读

相关 flutter 文本框组件TextField

文本框组件 TextField( maxLines: , 设置后即可将文本框改成多行文本框 maxLe

朴灿烈づ我的快乐病毒、/ 2021年07月24日 17:45/ 0 赞/ 561 阅读

相关 flutter 按钮组件

1、普通按钮RaisedButton 无法自己设置高宽,可以通过父元素或通过给child组件内部组件外包一个Padding组件来设置高宽

川长思鸟来/ 2021年07月24日 17:03/ 0 赞/ 514 阅读

相关 flutter 事件组件GestureDetector

用来给组件绑定事件 GestureDetector( child:组件, ...事件 onVerticalDragDown

古城微笑少年丶/ 2021年07月24日 13:56/ 0 赞/ 386 阅读

相关 Vue中如何正确强制组件重新渲染？

Vue中如何正确强制组件重新渲染？有时候，依赖 Vue 响应方式来更新数据是不够的，相反，我们需要手动重新渲染组件来更新数据。或者，我们可能只想抛开当前的DOM，重新开...

朱雀/ 2020年07月01日 20:07/ 0 赞/ 964 阅读