如何在 flutter 中遍历数组对象

Question

我需要在 flutter 中遍历数组中的对象列表，尝试了 map 函数，但它显示了一些错误，

final List<dynamic> data = [
    {
      'ccNumber': '1111 1111 1111 1111',
      'expDate': '12/27',
      'cvv': '123',
      'ccHolderName': 'xxx'
    },
    {
      'ccNumber': '2222 2222 2222 2222',
      'expDate': '12/27',
      'cvv': '123',
      'ccHolderName': 'yyy'
    },
    {
      'ccNumber': '3333 3333 3333 3333',
      'expDate': '12/27',
      'cvv': '123',
      'ccHolderName': 'zzz'
    }
];

这是我想迭代的数组对象，我想在小部件下面迭代。

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    const Text('1212 21** ****'),
    IconButton(
      onPressed: () {
        showDialog(
          context: context,
          builder: (context) {
            return Dialog(
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(20),
              ),
              child: const SingleChildScrollView(
                scrollDirection: Axis.vertical,
                child: CardsWidget(),
              ),
            );
          },
        );
      },
      icon: const FaIcon(
        FontAwesomeIcons.pen,
        size: 16,
      ),
    ),
  ],
),

需要遍历行并希望对象数组中的 ccNumber 显示在 const Text 部分并将每个数据传递给 CardsWidget()。尝试了很多方法，但似乎没有任何效果。

Answer 1

使用ListView.builder并将itemCount设为data.length。那么Text(data[i]["ccNumber])

ListView.builder(
  itemCount: data.length,
  itemBuilder: (context, i){
     return Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    const Text(data[i]["ccNumber"]),
    IconButton(
      onPressed: () {
        showDialog(
          context: context,
          builder: (context) {
            return Dialog(
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(20),
              ),
              child: const SingleChildScrollView(
                scrollDirection: Axis.vertical,
                child: CardsWidget(),
              ),
            );
          },
        );
      },
      icon: const FaIcon(
        FontAwesomeIcons.pen,
        size: 16,
      ),
    ),
  ],
);
}
)

Answer 2

@Ranto Berk

ListView having index from the itemBuilder. so it will iterate itself and return as per your array length.

itemBuilder：（BuildContext 上下文，int 索引）{}

if you need to add an edit button at end of each text?

inside ListView you can declare Row. 
Row having children properties. so you can give two column inside Row.
First column give text widget 
Second column for Edit you can use MaterialButton widget(it having onPress properties) there you can perform your functionality as per your requirement.

Blue print:

Row(
        children: [
          Column(
            children: const [
              Text(
                'Your text'
              )
            ],
          ),
          const SizedBox(width: 10.0),
          Column(
            children: [
              MaterialButton(onPressed: () {
                
              }),
            ],
          ),
        ],
      );

对于material按钮你可以参考官网https://api.flutter.dev/flutter/material/MaterialButton-class.html

编码愉快！！！

如何在 flutter 中遍历数组对象

how to Iterate through array object in flutter

flutter

dart

flutter-layout