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"]);
        },
      ),

Answer 1

您可以在另一个Comarticado.dart这样的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.builder(
          scrollDirection: Axis.vertical,
          itemCount: comm.length,
          itemBuilder: (BuildContext context, int index) {
           return makeCard(comm[index]);
         },
      ),

循环卡颤动

1 个答案: