[英]Flutter widgets best practices: Inner Class vs Function
I am a Java developer and currently learning about Flutter/Dart.我是一名 Java 开发人员,目前正在学习 Flutter/Dart。 I am an adept of clean code with small functions and some widget examples just scare the s*** out of me.我擅长使用带有小功能的简洁代码,一些小部件示例只是吓坏了我。
I am trying to implement a Card widget with some transaction information (price, title and date).我正在尝试使用一些交易信息(价格、标题和日期)来实现 Card 小部件。 Currently the code looks like this:目前代码如下所示:
class TransactionCard extends StatelessWidget {
final Transaction _transaction;
TransactionCard(this._transaction);
@override
Widget build(BuildContext context) {
return Container(
child: Card(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
_PriceContainer(_transaction.amount),
_DetailContainer(_transaction.title, _transaction.date),
],
),
),
);
}
}
// Inner Widgets
class _PriceContainer extends Container {
_PriceContainer(double amount)
: super(
margin: EdgeInsets.symmetric(
vertical: 10,
horizontal: 15,
),
decoration: BoxDecoration(
border: Border.all(
color: Colors.purple,
width: 2,
),
),
padding: EdgeInsets.all(10),
child: Text(
amount.toString(),
style: _amountTextStyle(),
),
);
}
class _DetailContainer extends Container {
_DetailContainer(String title, DateTime date)
: super(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
title,
style: _titleTextStyle(),
),
Text(
date.toString(),
style: _dateTextStyle(),
),
],
),
);
}
// Text styles
TextStyle _amountTextStyle() {
return TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20,
color: Colors.purple,
);
}
TextStyle _titleTextStyle() {
return TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18,
);
}
TextStyle _dateTextStyle() {
return TextStyle(color: Colors.grey);
}
I have used two approaches:我使用了两种方法:
Is there an approach preferable to the other?有没有比另一种更好的方法? A third one?第三个? Is there a bad practice to create multiple Widgets on the same file?在同一个文件上创建多个小部件是否有不好的做法?
As mentioned in the comments and in the Flutter documentation , you should always compose widgets instead of inheriting from eg a Container
.正如评论和Flutter 文档中所提到的,您应该始终编写小部件,而不是从例如Container
继承。
In your case, this would look like this:在你的情况下,这看起来像这样:
class _PriceContainer extends StatelessWidget {
final double amount;
const _PriceContainer({
Key key,
this.amount,
}) : super(key: key);
@override
Widget build(BuildContext context) => Container(
margin: const EdgeInsets.symmetric(
vertical: 10,
horizontal: 15,
),
decoration: BoxDecoration(
border: Border.all(
color: Colors.purple,
width: 2,
),
),
padding: EdgeInsets.all(10),
child: Text(
amount.toString(),
style: _amountTextStyle,
),
);
}
This is analogous for your other widgets.这与您的其他小部件类似。
Declaring top-level functions is generally fine, however, in this case, you should really define a top-level property instead - preferably declare a const
to take advantage of compile-time constants:声明顶级函数通常很好,但是,在这种情况下,您应该真正定义一个顶级属性 - 最好声明一个const
以利用编译时常量:
const _amountTextStyle = TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20,
color: Colors.purple,
);
You should be able to apply the same to your other text styles.您应该能够将相同的内容应用于您的其他文本 styles。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.