如何在不一遍又一遍地编写相同代码的情况下创建具有动态内容的小部件的长列表？ [关闭]

Posted 2023-02-23

【中文标题】如何在不一遍又一遍地编写相同代码的情况下创建具有动态内容的小部件的长列表？ [关闭]

【英文标题】：How to create long list of a widget with dynamic content without writing the same code again and again? [closed]

【发布时间】：2021-08-04 18:20:21

【问题描述】：

我想创建 60 个 CheckboxListTile 列表。 CheckboxListTiles 将有一个卷号。 60名学生。所以，我想在不复制 CheckboxListTile 60 次的情况下生成列表。 这就是最终结果的样子：

这是代码

import 'package:flutter/material.dart';

bool _tapped = false;

class AttendenceScr extends StatefulWidget 
  static String id = 'attendence_page';

  @override
  _AttendenceScrState createState() => _AttendenceScrState();


class _AttendenceScrState extends State<AttendenceScr> 
  @override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(
        title: Text('Attendence Page'),
        backgroundColor: Colors.redAccent,
      ),
      body: Container(
        child: CheckboxListTile(
          checkColor: Colors.red,
          title: Text('  Roll No.1'),
          secondary: Icon(Icons.person_pin),
          controlAffinity: ListTileControlAffinity.trailing,
          value: _tapped,
          onChanged: (value) 
            setState(() 
              _tapped = value;
            );
          ,
        ),
      ),
    );
  

【问题讨论】：

我也是 Flutter 的新手，现在正在学习它，但我认为您的代码应该以编程方式生成列表图块。在任何一种情况下，尤其是当您是 SO 新手时，其目的不是为您提供代码，而是为您提供支持并帮助修复您的代码。因此，您应该分享一些您尝试过的示例代码。如果你这样做了，人们更有可能提供帮助。此外，分解问题。 1. 熟悉 Flutter。 2. 学习如何做一个列表图块。 3. 了解如何动态生成和填充列表图块列表。 4. 存储到火力基地。一次一个:)

感谢您帮助我发布了我的考勤屏幕代码我想生成 60 个学生

【参考方案1】：

欢迎飘飘。在 Flutter 中，您可以使用 ListView.builder 非常轻松地做到这一点。 只需添加 60 个项目计数并创建一个滚动编号和布尔值列表。然后添加任何自定义小部件（例如文本小部件）并使用 itemBuilder 的索引并从卷号和布尔列表中打印该索引。通过这个，你可以用很少的代码做很多事情。

示例代码：

class MyWidget extends StatefulWidget 
  @override
  _MyWidgetState createState() => _MyWidgetState();


class _MyWidgetState extends State<MyWidget> 
  List<int> rollNo = [2016239009, 2016239007, 2016239002, 2016239008];
  List<bool> _value = [false, false, false, false];

  @override
  Widget build(BuildContext context) 
    return ListView.builder(
      itemCount: 4,
      itemBuilder: (context, index) 
        return CheckboxListTile(
          title: Text(rollNo[index].toString()),
          value: _value[index],
          onChanged: (bool value) 
            setState(() 
              _value[index] = !_value[index];
            );
          ,
          secondary: const Icon(Icons.hourglass_empty),
        );
      ,
    );
  

输出将是：

您可以查看 dartpad 以获取完整代码 here。

【讨论】：

感谢@Dc 的帮助，但这也适用于 CheckBoxListTile

是的，您可以提供任何小部件来返回 ListView.builder。只需将 ListView.builder 替换为 CheckBoxListTile。如果这回答了您的问题，请将其标记为答案。

return ListView.builder( itemCount: 4, itemBuilder: (context, index) return CheckboxListTile( value: _tapped, onChanged: (value) setState(() _tapped = value; ); , title: Text('Roll No. $rollNo[index]'), secondary: Icon(Icons.account_circle_outlined), controlAffinity: ListTileControlAffinity.trailing, ); , );

这是我的代码，但是当任何一个被选中时，所有复选框都会被选中，但我想选中我按下的复选框

您好，看来您也是编程新手，所以我已根据您的要求更新了答案，希望对您有所帮助。如果您有任何进一步的疑问，请告诉我。