Flutter评论框插件comment_box的使用

comment_box 是一个简单的 Flutter 评论框插件，适用于帖子和产品。它支持平滑滚动、用户头像（本地或网络）、文本换行等功能。

Youtube 预览

特性

• 支持平滑滚动
• 支持用户头像（本地和网络）
• 支持文本换行
• 更多功能…

开始使用

添加依赖

在你的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  ...
  comment_box: ^0.0.18

导入库

在你的 Dart 文件中导入 comment_box 库：

import 'package:comment_box/comment/comment.dart';

创建 CommentBox

你可以创建一个 CommentBox，如下所示：

CommentBox(
  userImage: CommentBox.commentImageParser(
      imageURLorPath: "assets/img/userpic.jpg"),
  child: commentChild(filedata),
  labelText: 'Write a comment...',
  errorText: 'Comment cannot be blank',
  withBorder: false,
  sendButtonMethod: () {
    if (formKey.currentState!.validate()) {
      print(commentController.text);
      setState(() {
        var value = {
          'name': 'New User',
          'pic':
              'https://lh3.googleusercontent.com/a-/AOh14GjRHcaendrf6gU5fPIVd8GIl1OgblrMMvGUoCBj4g=s400',
          'message': commentController.text,
          'date': '2021-01-01 12:00:00'
        };
        filedata.insert(0, value);
      });
      commentController.clear();
      FocusScope.of(context).unfocus();
    } else {
      print("Not validated");
    }
  },
  formKey: formKey,
  commentController: commentController,
  backgroundColor: Colors.pink,
  textColor: Colors.white,
  sendWidget: Icon(Icons.send_sharp, size: 30, color: Colors.white),
);

完整示例

以下是一个完整的示例，展示了如何在 Flutter 应用中使用 comment_box 插件：

import 'package:comment_box/comment/comment.dart';
import 'package:flutter/material.dart';

class TestMe extends StatefulWidget {
  @override
  _TestMeState createState() => _TestMeState();
}

class _TestMeState extends State<TestMe> {
  final formKey = GlobalKey<FormState>();
  final TextEditingController commentController = TextEditingController();
  List filedata = [
    {
      'name': 'Chuks Okwuenu',
      'pic': 'https://picsum.photos/300/30',
      'message': 'I love to code',
      'date': '2021-01-01 12:00:00'
    },
    {
      'name': 'Biggi Man',
      'pic': 'https://www.adeleyeayodeji.com/img/IMG_20200522_121756_834_2.jpg',
      'message': 'Very cool',
      'date': '2021-01-01 12:00:00'
    },
    {
      'name': 'Tunde Martins',
      'pic': 'assets/img/userpic.jpg',
      'message': 'Very cool',
      'date': '2021-01-01 12:00:00'
    },
    {
      'name': 'Biggi Man',
      'pic': 'https://picsum.photos/300/30',
      'message': 'Very cool',
      'date': '2021-01-01 12:00:00'
    },
  ];

  Widget commentChild(data) {
    return ListView(
      children: [
        for (var i = 0; i < data.length; i++)
          Padding(
            padding: const EdgeInsets.fromLTRB(2.0, 8.0, 2.0, 0.0),
            child: ListTile(
              leading: GestureDetector(
                onTap: () async {
                  // Display the image in large form.
                  print("Comment Clicked");
                },
                child: Container(
                  height: 50.0,
                  width: 50.0,
                  decoration: BoxDecoration(
                      color: Colors.blue,
                      borderRadius: BorderRadius.all(Radius.circular(50))),
                  child: CircleAvatar(
                      radius: 50,
                      backgroundImage: CommentBox.commentImageParser(
                          imageURLorPath: data[i]['pic'])),
                ),
              ),
              title: Text(
                data[i]['name'],
                style: TextStyle(fontWeight: FontWeight.bold),
              ),
              subtitle: Text(data[i]['message']),
              trailing: Text(data[i]['date'], style: TextStyle(fontSize: 10)),
            ),
          )
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Comment Page"),
        backgroundColor: Colors.pink,
      ),
      body: Container(
        child: CommentBox(
          userImage: CommentBox.commentImageParser(
              imageURLorPath: "assets/img/userpic.jpg"),
          child: commentChild(filedata),
          labelText: 'Write a comment...',
          errorText: 'Comment cannot be blank',
          withBorder: false,
          sendButtonMethod: () {
            if (formKey.currentState!.validate()) {
              print(commentController.text);
              setState(() {
                var value = {
                  'name': 'New User',
                  'pic':
                      'https://lh3.googleusercontent.com/a-/AOh14GjRHcaendrf6gU5fPIVd8GIl1OgblrMMvGUoCBj4g=s400',
                  'message': commentController.text,
                  'date': '2021-01-01 12:00:00'
                };
                filedata.insert(0, value);
              });
              commentController.clear();
              FocusScope.of(context).unfocus();
            } else {
              print("Not validated");
            }
          },
          formKey: formKey,
          commentController: commentController,
          backgroundColor: Colors.pink,
          textColor: Colors.white,
          sendWidget: Icon(Icons.send_sharp, size: 30, color: Colors.white),
        ),
      ),
    );
  }
}

通过以上步骤，你可以在 Flutter 应用中轻松地集成 comment_box 插件，为用户提供一个功能丰富的评论框。