使用 class 在 Flutter 中以列表形式传递参数

Question

我正在 Flutter 中开发一个简单的聊天屏幕 UI。有一个用户定义的小部件 MessageBubble，它接受三个参数：sender (String)、text (String)、isMe (bool)。目前它正在一个一个地传递静态值，就像这样：

List<MessageBubble> messages = [
    MessageBubble(
      sender: "Me",
      text: "Hi!",
      isMe: true,
    ),
    MessageBubble(
      sender: "Not Me",
      text: "Hey, hi!",
      isMe: false,
    ),
];

我想做的是，我创建了一个 class BubbleData，如下所示：

class BubbleData {
    List <String> sender = ['Not Me', 'Not Me'];
    List <String> text = ['Hey Hi', "What's new?"];
    List <bool> isMe = [false, false];
}

现在手头的问题是如何使用 ListView 生成器通过 MessageBubble 迭代这些列表项？

Answer 1

也许更好的方法是按如下方式定义您的 BubbleData：

class BubbleData{
   String sender;
   String text;
   bool isMe;

   BubbleData({this.sender, this.text, this.isMe});
}

然后您创建一个可以迭代的列表，其中包含您的数据：

List<BubbleData> bubbles = [
   BubbleData(sender: 'Not Me', text: 'Hey Mi', isMe: false),
   BubbleData(sender: 'Not Me', text: 'What\'s new?', isMe: false)
];

下一步将映射并转换为 MessageBubble 的列表：

List<MessageBubble> messages = bubbles.map((bubble) =>
   MessageBubble(
      sender: bubble.sender, 
      text: bubble.text, 
      isMe: bubble.isMe
   )
).toList();

Answer 2

你可以这样迭代：

BubbleData data = BubbleData();  //instantiating

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: ListView.builder(
      itemCount: data.sender.length,
      itemBuilder: (_, index) {
        return ListTile(
          title: Text(data.text[index]),         //iterating
          subtitle: Text(data.sender[index]),
        );
      },
    ),
  );
}

Answer 3

按照阿卡德的回答。您可以像这样在 listView 中使用它：

 class MyBubbleList extends StatelessWidget {

  final List<BubbleData> bubbles = [
   BubbleData(sender: 'Not Me', text: 'Hey Mi', isMe: false),
   BubbleData(sender: 'Not Me', text: 'What\'s new?', isMe: false)
];

  @override
  Widget build(BuildContext context) {

    //here the ListView part
    return ListView.builder(
      itemCount:bubbles.length,
      itemBuilder: (BuildContext context, int index) { 
             return Container(child:Text(bubbles[index].text));
      },);
  }
}

您可以在 Flutter 文档中查看更多信息。您会找到关于如何使用 ListView 的非常好的视频教程。 https://api.flutter.dev/flutter/widgets/ListView-class.html

希望对您有所帮助

使用 class 在 Flutter 中以列表形式传递参数

Use class to pass parameters as list in Flutter

flutter

dart

flutter-listview