[英]How to use Custom Widgets in flutter
我是Flutter的新手,我正在按照Flutter的官方教程学习flutter的基础知识。
所以,我想创建一个名为“CustomCard”的可重用组件,我这样做了:
class CustomCard extends StatelessWidget {
CustomCard({@required this.index, @required this.onPress});
final index;
final Function onPress;
@override
Widget build(BuildContext context) {
return Card(
child: Column(
children: <Widget>[
Text('Card $index'),
FlatButton(
child: const Text('Press'),
onPressed: this.onPress,
)
],
),
);
}
}
现在,为了在 MyApp 中使用它,我这样做了:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Welcome to flutter',
home: Scaffold(
appBar: AppBar(
title: Text('hello'),
),
body: Center(
child: Text('centre'),
CustomCard(
index:'card1',
onPress: print(' this is $index')
),
),
),
);
}
}
现在我的 IDE 说:
未为 class“MyApp”定义方法“CustonCard”。
如何解决这个问题?
终端错误:
Compiler message:
lib/main.dart:17:6: Error: Place positional arguments before named arguments.
Try moving the positional argument before the named arguments, or add a name to the argument.
CustomCard(
^^^^^^^^^^
lib/main.dart:17:6: Error: Expected named argument.
CustomCard(
^
lib/main.dart:15:21: Error: No named parameter with the name '#1'.
body: Center(
^^...
/C:/src/flutter/packages/flutter/lib/src/widgets/basic.dart:1863:9: Context: Found this candidate, but the arguments don't match.
const Center({ Key key, double widthFactor, double heightFactor, Widget child })
编辑:更正了一个拼写错误。 还添加控制台日志。
嘿,请在此处检查更新的代码。 有几个编译错误,因为您将 Text 和 CustomWidget 包装在 Center 中,它只接受一个子窗口小部件,并且在 onPress 方法中需要一些代码更改。
import 'package:flutter/material.dart';
final Color darkBlue = Color.fromARGB(255, 18, 32, 47);
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Welcome to flutter',
home: Scaffold(
appBar: AppBar(
title: Text('hello'),
),
body: Center(
child:Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('centre'),
CustomCard(
index:'card1',
onPress: onPress
)
],
)
)
),
);
}
onPress(index){
print("this is $index");
}
}
class CustomCard extends StatelessWidget {
CustomCard({@required this.index, @required this.onPress});
final index;
final Function onPress;
@override
Widget build(BuildContext context) {
return Card(
child: Column(
children: <Widget>[
Text('Card $index'),
FlatButton(
child: const Text('Press'),
onPressed: (){
this.onPress(index);
},
)
],
),
);
}
}
你犯了一些错误,但不要担心它会在一开始就发生。 那么让我们进入问题:
首先,在 body 内部,您定义了一个Center Widget,它只允许其中有一个子项,但您尝试放置两个 Widget( Text和CustomCard )。 因此,要放置这两个小部件,您可以将其更改为如下所示:
Center(
child: Column(
children: <Widget>[
Text('centre'),
CustomCard(...)
],
),
),
此外,请注意 onPress function 将 Function 作为参数,但您传递的是print(...)的结果,即void 。 只需将其更改为:
CustomCard(index: index, onPress: () => print(' this is $index'))
最后,我认为你错过了定义索引变量。 只需添加:
String index = "card1";
child: Center(
child: Row(
children: <Widget>[
_box(), //Custom pin view
_box(), //Custom pin view
_box(), //Custom pin view
_box(),//Custom pin view
],
),
)
和自定义小部件 (_box) 代码
Widget _box() {
return Container(
margin: EdgeInsets.symmetric(vertical: 5, horizontal: 3),
alignment: Alignment.center,
height: 50,
width: 50,
child: TextField(
keyboardType: TextInputType.number,
maxLength: 1,
decoration: InputDecoration(border: InputBorder.none, counterText: ''),
),
decoration: BoxDecoration(border: Border.all(color: Colors.blue)),
); }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.