Flutter 参数类型';评论框';can';不能分配给参数类型';小部件';
我正在开发一个Android应用程序。我希望用户对应用程序和test.dart页面发表评论,我得到一个错误,参数类型“CommentBox”无法分配给参数类型“Widget” 我有一个名为CommentBox的构造函数。但它不允许我用它来测试 这是test.dart代码:Flutter 参数类型';评论框';can';不能分配给参数类型';小部件';,flutter,dart,Flutter,Dart,我正在开发一个Android应用程序。我希望用户对应用程序和test.dart页面发表评论,我得到一个错误,参数类型“CommentBox”无法分配给参数类型“Widget” 我有一个名为CommentBox的构造函数。但它不允许我用它来测试 这是test.dart代码: import 'package:city_travel_guide/pages/comment/comment.dart'; import 'package:flutter/material.dart'; class Tes
import 'package:city_travel_guide/pages/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': 'Adeleye Ayodeji',
'pic': 'https://picsum.photos/300/30',
'message': 'I love to code'
},
{
'name': 'Biggi Man',
'pic': 'https://picsum.photos/300/30',
'message': 'Very cool'
},
{
'name': 'Biggi Man',
'pic': 'https://picsum.photos/300/30',
'message': 'Very cool'
},
{
'name': 'Biggi Man',
'pic': 'https://picsum.photos/300/30',
'message': 'Very cool'
},
];
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: new BoxDecoration(
color: Colors.blue,
borderRadius: new BorderRadius.all(Radius.circular(50))),
child: CircleAvatar(
radius: 50,
backgroundImage: NetworkImage(data[i]['pic'] + "$i")),
),
),
title: Text(
data[i]['name'],
style: TextStyle(fontWeight: FontWeight.bold),
),
subtitle: Text(data[i]['message']),
),
)
],
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Comment Page"),
backgroundColor: Colors.pink,
),
body: Container(
child: CommentBox(
userImage:
"https://lh3.googleusercontent.com/a-/AOh14GjRHcaendrf6gU5fPIVd8GIl1OgblrMMvGUoCBj4g=s400",
child: commentChild(filedata),
labelText: 'Write a comment...',
withBorder: false,
errorText: 'Comment cannot be blank',
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
};
filedata.insert(0, value);
});
commentController.clear();
FocusScope.of(context).unfocus();
} else {
print("Not validated");
}
},
formKey: formKey,
commentController: commentController,
backgroundColor: Colors.black,
textColor: Colors.white,
sendWidget: Icon(Icons.send_sharp, size: 30, color: Colors.white),
),
),
);
}
}
您需要使用无状态小部件扩展CommentBox,使字段成为最终字段,并覆盖构建方法,如下所示
import 'package:flutter/material.dart';
class CommentBox extends StatelessWidget {
final Widget child;
final dynamic formKey;
final dynamic sendButtonMethod;
final dynamic commentController;
final String userImage;
final String labelText;
final String errorText;
final Widget sendWidget;
final Color backgroundColor;
final Color textColor;
final bool withBorder;
//Constructor
CommentBox(
{this.child,
this.formKey,
this.sendButtonMethod,
this.commentController,
this.userImage,
this.labelText,
this.errorText,
this.sendWidget,
this.backgroundColor,
this.textColor,
this.withBorder});
@override
Widget build(BuildContext context) {
return Column(
children: [
Expanded(child: child),
Divider(
height: 1,
),
ListTile(
tileColor: backgroundColor,
leading: Container(
height: 40.0,
width: 40.0,
decoration: new BoxDecoration(
color: Colors.blue,
borderRadius: new BorderRadius.all(Radius.circular(50))),
child: CircleAvatar(
radius: 50, backgroundImage: NetworkImage(userImage)),
),
title: Form(
key: formKey,
child: TextFormField(
maxLines: 4,
minLines: 1,
cursorColor: textColor,
style: TextStyle(color: textColor),
controller: commentController,
decoration: InputDecoration(
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: textColor),
),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: textColor)),
border: UnderlineInputBorder(
borderSide: BorderSide(color: textColor)),
labelText: labelText,
focusColor: textColor,
fillColor: textColor,
labelStyle: TextStyle(color: textColor),
),
validator: (value) => value.isEmpty ? errorText : null,
),
),
trailing: OutlineButton(
highlightedBorderColor: Colors.orange,
onPressed: sendButtonMethod,
borderSide: BorderSide.none,
child: sendWidget,
),
),
],
);
}
}
你应该使用OutlineButton,因为OutlineButton是你能为commentboxI添加代码吗?我编辑了问题你需要用无状态小部件扩展它,并在commentboxI中添加@override,在上面
小部件构建
,你能举个例子吗?看看这个,如果它有效,我会添加这个作为答案。谢谢,我已经修复了它。
import 'package:flutter/material.dart';
class CommentBox extends StatelessWidget {
final Widget child;
final dynamic formKey;
final dynamic sendButtonMethod;
final dynamic commentController;
final String userImage;
final String labelText;
final String errorText;
final Widget sendWidget;
final Color backgroundColor;
final Color textColor;
final bool withBorder;
//Constructor
CommentBox(
{this.child,
this.formKey,
this.sendButtonMethod,
this.commentController,
this.userImage,
this.labelText,
this.errorText,
this.sendWidget,
this.backgroundColor,
this.textColor,
this.withBorder});
@override
Widget build(BuildContext context) {
return Column(
children: [
Expanded(child: child),
Divider(
height: 1,
),
ListTile(
tileColor: backgroundColor,
leading: Container(
height: 40.0,
width: 40.0,
decoration: new BoxDecoration(
color: Colors.blue,
borderRadius: new BorderRadius.all(Radius.circular(50))),
child: CircleAvatar(
radius: 50, backgroundImage: NetworkImage(userImage)),
),
title: Form(
key: formKey,
child: TextFormField(
maxLines: 4,
minLines: 1,
cursorColor: textColor,
style: TextStyle(color: textColor),
controller: commentController,
decoration: InputDecoration(
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: textColor),
),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: textColor)),
border: UnderlineInputBorder(
borderSide: BorderSide(color: textColor)),
labelText: labelText,
focusColor: textColor,
fillColor: textColor,
labelStyle: TextStyle(color: textColor),
),
validator: (value) => value.isEmpty ? errorText : null,
),
),
trailing: OutlineButton(
highlightedBorderColor: Colors.orange,
onPressed: sendButtonMethod,
borderSide: BorderSide.none,
child: sendWidget,
),
),
],
);
}
}
the previous message is not entirely correct, so:
import 'package:flutter/material.dart';
class CommentBox extends StatelessWidget {
final Widget child;
final dynamic formKey;
final dynamic sendButtonMethod;
final dynamic commentController;
final String userImage;
final String labelText;
final String errorText;
final Widget sendWidget;
final Color backgroundColor;
final Color textColor;
final bool withBorder;
//Constructor
CommentBox(
this.child,
this.formKey,
this.sendButtonMethod,
this.commentController,
this.userImage,
this.labelText,
this.errorText,
this.sendWidget,
this.backgroundColor,
this.textColor,
this.withBorder );
@override
Widget build(BuildContext context) {
return Column(
children: [
Expanded(child: child),
Divider(
height: 1,
),
ListTile(
tileColor: backgroundColor,
leading: Container(
height: 40.0,
width: 40.0,
decoration: new BoxDecoration(
color: Colors.blue,
borderRadius: new BorderRadius.all(Radius.circular(50))),
child: CircleAvatar(
radius: 50, backgroundImage: NetworkImage(userImage)),
),
title: Form(
key: formKey,
child: TextFormField(
maxLines: 4,
minLines: 1,
cursorColor: textColor,
style: TextStyle(color: textColor),
controller: commentController,
decoration: InputDecoration(
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: textColor),
),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: textColor)),
border: UnderlineInputBorder(
borderSide: BorderSide(color: textColor)),
labelText: labelText,
focusColor: textColor,
fillColor: textColor,
labelStyle: TextStyle(color: textColor),
),
validator: (value) {if (value == null || value.isEmpty) {return "some text";} return null;},
),
),
trailing: OutlinedButton(
style: OutlinedButton.styleFrom(
side: BorderSide.none,),
child: sendWidget,
onPressed: sendButtonMethod,
),
),
],
);
}
}