我该怎么办,无论文本多长时间都具有相同的开始对齐方式?
我做一个无状态的小部件category_card,将使用四次。
import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
class CategoryCard extends StatelessWidget {
final String svgSrc;
final String title;
final VoidCallback press;
const CategoryCard(
{Key? key,
required this.svgSrc,
required this.title,
required this.press})
: super(key: key);
@override
Widget build(BuildContext context) {
return ClipRRect(
borderRadius: BorderRadius.circular(13),
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(13),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.15),
spreadRadius: 5,
blurRadius: 7,
offset: const Offset(0, 3), // changes position of shadow
),
],
),
child: Material(
color: Colors.transparent,
child: InkWell(
onTap: press,
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
children: [
const Spacer(),
SvgPicture.asset(
svgSrc,
height: 100,
width: 100,
),
const Spacer(),
Text(
title,
style: Theme.of(context).textTheme.subtitle1!.copyWith(
fontWeight: FontWeight.w800,
fontSize: 15,
color: Colors.blueGrey[900]),
),
],
),
),
),
),
),
),
);
}
}
我的输出还不错,但是长文本(例如医学状况)的文本部分该单词与较短的单词(例如过敏)不符。我该怎么办,无论文本多长时间都具有相同的开始对齐方式? 在此处输入图像描述
I do a stateless widget category_card which is going to use four times.
import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
class CategoryCard extends StatelessWidget {
final String svgSrc;
final String title;
final VoidCallback press;
const CategoryCard(
{Key? key,
required this.svgSrc,
required this.title,
required this.press})
: super(key: key);
@override
Widget build(BuildContext context) {
return ClipRRect(
borderRadius: BorderRadius.circular(13),
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(13),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.15),
spreadRadius: 5,
blurRadius: 7,
offset: const Offset(0, 3), // changes position of shadow
),
],
),
child: Material(
color: Colors.transparent,
child: InkWell(
onTap: press,
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
children: [
const Spacer(),
SvgPicture.asset(
svgSrc,
height: 100,
width: 100,
),
const Spacer(),
Text(
title,
style: Theme.of(context).textTheme.subtitle1!.copyWith(
fontWeight: FontWeight.w800,
fontSize: 15,
color: Colors.blueGrey[900]),
),
],
),
),
),
),
),
),
);
}
}
My output is alright, but the text part for long text such as medical condition the word is not align with the shorter word such as allergy. What can I do so that no matter how long the text all will have same starting alignment?
enter image description here
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
您可以使用
列
属性在同一点制作所有项目you can use
Column
property for making all it's item at the same point