如何将文本"您的结果"和"您最有可能是$result"显示在页面左侧?
下面是我的代码:
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: const Color.fromARGB(220, 255, 255, 255),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
const Text(
"Your Result",
style: TextStyle(
fontFamily: 'DM Sans Regular',
fontSize: 36,
fontWeight: FontWeight.bold),
textAlign: TextAlign.left,
),
const SizedBox(height: 16),
Text("You are most likely $result"),
const SizedBox(height: 16),
SizedBox(
width: 326,
height: 326,
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(40),
//set border radius more than 50% of height and width to make circle
),
child: Center(
child: Text(
"$score / ${questionList.length}",
textAlign: TextAlign.center,
style: const TextStyle(
fontFamily: 'DM Sans Regular',
fontSize: 48,
fontWeight: FontWeight.bold),
),
),
),
),
const SizedBox(height: 16),
const Text(
"Please consult with your specialist for\nconfirmation",
style: TextStyle(
fontFamily: 'DM Sans Regular',
fontSize: 16,
fontWeight: FontWeight.bold,
overflow: TextOverflow.ellipsis,
),
maxLines: 2,
textAlign: TextAlign.center,
),
const SizedBox(height: 100),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 50),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[...],
),
)
],
),
),
);
}
这是代码The output is looking like this的输出
这就是我希望它看起来像Actually I want it to be looking like this的设计
2条答案
按热度按时间hs1ihplo1#
我正在浏览您的代码,我发现了2个问题的解决方案,我发现的第一个是将柱的横轴对齐更改为:
crossAxisAlignment: CrossAxisAlignment.stretch
,但是这个解决方案有一个问题,这会弄乱你当前的布局,所以你需要使用填充来修复所有的布局。我找到的第二个,也是我认为最好的一个,是将每个文本 Package 在一行中,这样行就会按照你的意愿将文本定位在屏幕的左侧,你甚至可以添加一些填充来达到你在最终设计中展示的效果:}
l7mqbcuq2#
将
Text
小工具 Package 为align
并设置alignment:Alignment.topLeft,
像这样,
完整代码: