问题描述
我有这样的设计,其中几个文本和图像我试图按顺序显示所有内容。但是当文本的长度增加或减少时,对齐方式全部分崩离析。第一个图像是我正在尝试的设计 第二张图片是我到目前为止尝试过的。
我正在尝试为API设计。如果文本太长会影响设计,所以请在API数据的基础上帮助我解决此问题
代码
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),),body:SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.max,crossAxisAlignment: CrossAxisAlignment.center,mainAxisAlignment: MainAxisAlignment.spaceEvenly,children: [
Flexible(
flex: 0,child: Padding(
padding: const EdgeInsets.all(8.0),child: Card(
child: Container(
height: 450,width: 400,child: Column(
crossAxisAlignment: CrossAxisAlignment.center,children: [
Flexible(
flex: 0,child: Row(
crossAxisAlignment: CrossAxisAlignment.center,children: [
Text("Register Number"),Text(":"),Flexible(
flex: 0,child: Text(
'KL 10 AC 1896',style: TextStyle(
color: Color.fromRGBO(92,52,76,1),fontSize: 15,fontWeight: FontWeight.bold),)),],Flexible(
flex: 0,children: [
Text("Model Name"),child: Text(
'Maruti Suzuki Swift',children: [
Text("Requested Litres"),child: Text(
'4 L Petrol',children: [
Text("Petrol Station"),child: Text(
'Malappuram',Row(
crossAxisAlignment: CrossAxisAlignment.center,children: [
Text("Odometer Reading"),Text(
'19548 KM',style: TextStyle(
color: Color.fromRGBO(92,child: Container(
width: 280,height: 180,decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(
"assets/images/dummy.png",fit: BoxFit.cover)),child: Padding(
padding: EdgeInsets.only(top: 10),child: GestureDetector(
child: Container(
height: 45,width: 250,child: Center(
child: Text(
"Delete Request",style: TextStyle(
color: Colors.white,decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5),color: Color.fromRGBO(92,onTap: () {},)
],)
],}
解决方法
如果要在小部件上对齐,可以始终使用Table
(Official video)小部件。例如
Table(
children: [
TableRow(
children: [
TableCell(
child: Text('My label 1'),),TableCell(
child: Text(':'),TableCell(
child: Text('My Value 1'),]
),TableRow(
children: [
TableCell(
child: Text('My label 2'),TableCell(
child: Text(':'),TableCell(
child: Text('My Value 3'),]
),]
),
看看这个CodePen https://codepen.io/fcontreras-the-bashful/pen/qBZOXvZ
,行属性mainAxisAlignment: MainAxisAlignment.spaceEvenly,
不能那样工作。它将根据项目的大小对齐项目,因此在您的情况下,它会将所有“:”带到第一个项目结束和第三个项目开始之间的中心。
如果要像示例一样对齐项目,则应执行以下操作
为什么有一个带有flex 0的灵活小部件?似乎不必要
...
Column(
crossAxisAlignment: CrossAxisAlignment.stretch,//We are telling to all the children to stretch,it's necessary for Row
mainAxisAlignment: MainAxisAlignment.spaceEvenly,children: [
Row(
crossAxisAlignment: CrossAxisAlignment.center,children: [
Expanded(child:Text("Register Number")) //Maybe add a Padding widget to Text (?)
Expanded(
child:Row(children:[
Text(":"),Expanded(child:
Text(
'KL 10 AC 1896',style: TextStyle(
color: Color.fromRGBO(92,52,76,1),fontSize: 15,fontWeight: FontWeight.bold),))
]))
],...
,
class MyWidget extends StatelessWidget {
final leftText = [
"Register Number","Model Name","Requested Litres","Petrol Station","Odometer Reading"
];
final rightText = [
"KL 10 AC 1896","Maruti Suzuki Swift","4L Petrol","Malappuram","19548 KM"
];
@override
Widget build(BuildContext context) {
return Row(
children: [
Flexible(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,children: [
for (var text in leftText)
Text(
text,style: TextStyle(
color: Colors.white,fontSize: 16,fontWeight: FontWeight.bold,],const SizedBox(width: 8.0),Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,children: [
for (var text in rightText)
Row(
children: [
Text(
":",style: TextStyle(
color: Colors.white,Text(
text,style: TextStyle(
color: Color.fromRGBO(92,);
}
}