flutter - 循环卡颤动

Question

我一直在研究 Flutter，出现了一个问题——

我有一个包含一些信息的数组，我需要根据这个数组添加卡片。

目前，我创建了一个循环并添加了遵循我的数组结构和下面列出的程序的卡片。请注意，当我调用传递参数的语句时，代码运行没有任何问题，但以下代码对我不起作用：

import "package:acessorias/pages/global.variables.dart";
import "package:flutter/material.dart";

class Comunicados extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.white,
        title: Center(
          child: SizedBox(
            width: 150,
            child: Image.asset("assets/image/logo.png"),
          ),
        ),
        actions: <Widget>[
          Container(
            width: 60,
            child: FlatButton(
              child: Icon(
                Icons.search,
                color: Color(0xFFBABABA),
              ),
              onPressed: () => {},
            ),
          ),
        ],
      ),
      body: Container(
        color: Color(0xFFF2F3F6),
        child: ListView(
          children: <Widget>[
            comunicado(comunicados[0]["LogNome"], comunicados[0]["EmComDTH"],
                comunicados[0]["EmComDesc"]),
            comunicado(comunicados[1]["LogNome"], comunicados[1]["EmComDTH"],
                comunicados[1]["EmComDesc"]),
            comunicado(comunicados[2]["LogNome"], comunicados[2]["EmComDTH"],
                comunicados[2]["EmComDesc"]),
            comunicado(comunicados[3]["LogNome"], comunicados[3]["EmComDTH"],
                comunicados[3]["EmComDesc"]),
            comunicado(comunicados[4]["LogNome"], comunicados[4]["EmComDTH"],
                comunicados[4]["EmComDesc"]),
            comunicado(comunicados[5]["LogNome"], comunicados[5]["EmComDTH"],
                comunicados[5]["EmComDesc"])
          ],
        ),
      ),
    );
  }
}

Widget comunicado(user, data, msg) {
  return Card(
    child: Column(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        ListTile(
          leading: CircleAvatar(
            backgroundImage: AssetImage("assets/image/foto.png"),
          ),
          title: new Text(user),
          subtitle: Text(data),
          trailing: Icon(Icons.more_vert),
        ),
        /*Container(
          child: Image.asset("assets/image/post.png"),
        ),*/
        Container(
          padding: EdgeInsets.all(10),
          child: Text(msg),
        ),
        ButtonTheme.bar(
          child: ButtonBar(
            children: <Widget>[
              FlatButton(
                child: Icon(Icons.favorite),
                onPressed: () {},
              ),
              FlatButton(
                child: Icon(Icons.share),
                onPressed: () {},
              ),
            ],
          ),
        ),
      ],
    ),
  );
}

解决方案

body: ListView.builder(
        itemCount: comunicados.length,
        itemBuilder: (context, index) {
          /*return ListTile(
            title: Text('${comunicados[index]}'),
          );*/
          return comunicado(comunicados[index]['LogNome'],
              comunicados[index]["EmComDTH"], comunicados[index]["EmComDesc"]);
        },
      ),

标签： flutter

Answer 1

您可以在另一个 dart 文件中使用数据模型，例如 Comunicado.dart

class Comunicado{
  String user;
  String data;
  String msg;

  Comunicado(
      {this.user, this.data, this.msg});
}

之后，您可以使用静态数据等制作数据模型列表

List getComunicado(){
 return[
    Comunicado(
     user: comunicados[0]["LogNome"],
     data: comunicados[0]["EmComDTH"],
     msg: comunicados[0]["EmComDesc"],
   ),
    Comunicado(
     user: comunicados[1]["LogNome"],
     data: comunicados[1]["EmComDTH"],
     msg: comunicados[1]["EmComDesc"],
   ),
 ]
}

就我而言，我将其置于初始状态并且不要忘记声明 comm

@override
  void initState() {
    super.initState();
    comm= getComunicado();
  }

用于自定义卡

   Card makeCard(Comunicado newComm) => Card(
    child: Column(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        ListTile(
          leading: CircleAvatar(
            backgroundImage: AssetImage("assets/image/foto.png"),
          ),
          title: new Text("${newComm.user}"),
          subtitle: Text("${newComm.data}"),
          trailing: Icon(Icons.more_vert),
        ),
        /*Container(
          child: Image.asset("assets/image/post.png"),
        ),*/
        Container(
          padding: EdgeInsets.all(10),
          child: Text("${newComm.msg}"),
        ),
        ButtonTheme.bar(
          child: ButtonBar(
            children: <Widget>[
              FlatButton(
                child: Icon(Icons.favorite),
                onPressed: () {},
              ),
              FlatButton(
                child: Icon(Icons.share),
                onPressed: () {},
              ),
            ],
          ),
        ),
      ],
    ),
  );

最后你可以在listview上调用make card

ListView.builder(
          scrollDirection: Axis.vertical,
          itemCount: comm.length,
          itemBuilder: (BuildContext context, int index) {
           return makeCard(comm[index]);
         },
      ),