如何在Flutter中有两个不同的文本位置(顶部和底部)？
如何在Flutter中有两个不同的文本位置(顶部和底部)？
提问于 2021-03-19 04:30:09
我正在尝试弄清楚如何将文本放在自定义卡片组件的左下角，并将文本放在左上角作为标题
下面是我想要实现的一个例子：
现在我有一个自定义的Card组件，如下所示：
Widget build(BuildContext context) {
return GestureDetector(
onTap: onPress,
child: Container(
child: cardChild,
padding: EdgeInsets.fromLTRB(10, 8, 10, 8),
margin: EdgeInsets.fromLTRB(10, 8, 10, 8),
decoration: BoxDecoration(
color: colour,
borderRadius: BorderRadius.circular(10.0),
),
),
);
}然后我使用这个卡片组件，如下所示：
return CustomCard(
colour: Color(0xFF303030),
cardChild: Column(
// mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
"Top Text",
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 28)
),
Text(
"Bottom Text",
style: TextStyle(fontSize: 18)
)
],
),
);我想我可以做的是为左下角的文本设置一个容器，它让我接近了结果，但我认为我做得不是很正确。
回答 2
Stack Overflow用户
回答已采纳
发布于 2021-03-19 04:41:32
您应该在两个Text小部件之间添加一个Expanded(child: SizedBox())小部件
return CustomCard(
colour: Color(0xFF303030),
cardChild: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("Top Text", style: TextStyle(fontWeight: FontWeight.bold, fontSize: 28)),
Expanded(child: SizedBox()),
Text("Bottom Text", style: TextStyle(fontSize: 18))
],
),
);如果您愿意，可以添加一个包装Column的Padding小部件，以向Card小部件添加内部填充。
Stack Overflow用户
发布于 2021-03-19 04:59:23
您需要做的就是将mainAxisAlignment: MainAxisAlignment.spaceBetween添加到Column中
https://www.dartpad.dev/fb357b9308db33ce11074a9c5f7aa41e?null_safety=true
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66698699
复制相关文章
相似问题
腾讯云开发者
