如何解决在 Flutter 中右对齐属于不同行的元素
我正在 Flutter 中构建一个加密投资组合应用程序。 我的主页有一个 Scaffold,其中有一列包含 4 行。前三行设计相似,每行都以加密货币的标志、名称和我持有的金额开头。问题是我持有的金额,因为它可以是一个非常大或非常小的数字,因此该值的范围很广,我似乎无法找到对齐或正确证明这些值的方法。我希望所有数字都与屏幕右侧对齐。
这是我的代码:
return
Scaffold
(
appBar: AppBar(
title: Text('Portfolio'),),backgroundColor: Colors.white,body: Column( children: <Widget>[
Row(
children: [
Container(
margin: EdgeInsets.all(10.0),child: new Image.asset(
'lib/assets/usdt_logo.png',height: 60.0,fit: BoxFit.cover,Container(
margin: EdgeInsets.all(10.0),child: new Text('USDT',style: TextStyle(fontSize: 15),Container(
alignment: Alignment.topRight,margin: EdgeInsets.all(30.0),child: new Text("${data['usdt']}",style: TextStyle(fontSize: 25),],Row(//ROW 2
children: [
Container(
margin: EdgeInsets.all(10.0),child: new Image.asset(
'lib/assets/bitcoin_logo.png',child: new Text('Bitcoin',Container(
margin: EdgeInsets.all(30.0),alignment: Alignment.topRight,child: new Text("${data['btc']}",Row(// ROW 3
children: [
Container(
margin: EdgeInsets.all(10.0),child: new Image.asset(
'lib/assets/ethereum_logo.png',Container(
margin: EdgeInsets.all(10.0),child: new Text('Ethereum',Container(
margin: EdgeInsets.all(30.0),child: new Text("${data['eth']}",]
),Row(// ROW 4
children: [
ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.lightGreen,// background
onPrimary: Colors.white,// foreground
),onPressed: ()
{
Navigator.pushNamed
(
context,BuyPage.id,);
},child: Text('Buy'),ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.red,onPressed: () {
Navigator.pushNamed
(
context,SellPage.id,child: Text('Sell'),)
);
解决方法
在 Spacer
的最后两个 Container
之间添加 Row
:
Row(// ROW 3
children: [
Container(
margin: EdgeInsets.all(10.0),child: new Image.asset(
'lib/assets/ethereum_logo.png',height: 60.0,fit: BoxFit.cover,),Container(
margin: EdgeInsets.all(10.0),child: new Text('Ethereum',style: TextStyle(fontSize: 15),Spacer(),//Spacer here
Container(
margin: EdgeInsets.all(30.0),alignment: Alignment.topRight,child: new Text("${data['eth']}",style: TextStyle(fontSize: 25),]
),
,
你也可以试试这个
class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
Row(
children: [
Row(
children: [
Container(
height: 50,width: 50,margin: EdgeInsets.all(10.0),color: Colors.red,Container(
margin: EdgeInsets.all(10.0),child: new Text(
'USDT',],Expanded(
child: Container(
margin: EdgeInsets.all(30.0),child: new Text(
"100.0",textAlign: TextAlign.end,)
],Row(
children: [
Row(
children: [
Container(
height: 50,color: Colors.green,child: new Text(
'Bitcoin',child: new Text(
"0.000000005",);
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。