堆栈内存溢出
  简体   繁体   English

如何在Flutter中自动调整行内文本的大小

[英]How to auto resize text inside a row in flutter

 原文  2019-05-19 16:55:13  3   1    dart/ flutter/ flutter-layout

问题描述

I am trying to replicate the below UI. 我正在尝试复制以下用户界面。 I want to show a list of items where each item is equally distributed into 3 sections(refer below image). 我想显示一个项目列表，其中每个项目平均分为3个部分（请参见下图）。 I want to achieve the same responsiveness. 我想获得相同的响应度。 But I am not able to put them in perfect order. 但是我无法使它们处于完美的状态。 Here is the mockup: 这是样机：

在此处输入图片说明

This is what I achieved: 这是我实现的目标：

在此处输入图片说明

Here is my code: 这是我的代码： 

Card stockList() {
    return Card(
      child: Container(
        padding: EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Text('Stocks & Values', style: Theme.of(context).textTheme.subtitle,),
            SizedBox(height: 10.0),
            tile1(),
            SizedBox(height: 10.0,),
            Divider(),
            SizedBox(height: 10.0,),
            tile2(),
            SizedBox(height: 10.0,),
            Divider(),
            tile3(),
            SizedBox(height: 10.0,),
            Divider(),
            tile4(),
          ],
        ),
      ),
    );
  }

  Container tile1() {
    return Container(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Row(
                children: <Widget>[
                  Text('24k', style: Theme.of(context).textTheme.title,),
                  SizedBox(width: 5.0),
                  Image.asset('assets/country_flags/in.png',width: 20.0,height: 20.0,)
                ],
              ),
              SizedBox(height: 2.0,),
              Text('$currencySymbol 3,678.00', style: Theme.of(context).textTheme.subtitle,),
              SizedBox(height: 2.0,),
              Text('May 3, 13:40 IST', style: Theme.of(context).textTheme.caption,)
            ],
          ),
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('35.00', style: Theme.of(context).textTheme.title,),
              SizedBox(height: 2.0,),
              Text('gms', style: Theme.of(context).textTheme.caption,)
            ],
          ),
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('$currencySymbol 34,355.00', style: Theme.of(context).textTheme.title,),
              SizedBox(height: 2.0,),
              Text('current value', style: Theme.of(context).textTheme.caption,)
            ],
          )
        ],
      ),
    );
  }

  Container tile2() {
    return Container(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Row(
                children: <Widget>[
                  Text('22k', style: Theme.of(context).textTheme.title,),
                  SizedBox(width: 5.0),
                  Image.asset('assets/country_flags/in.png',width: 20.0,height: 20.0,)
                ],
              ),
//              SizedBox(height: 2.0,),
//              Text('$currencySymbol 3,678.00', style: Theme.of(context).textTheme.subtitle,),
//              SizedBox(height: 2.0,),
//              Text('May 3, 13:40 IST', style: Theme.of(context).textTheme.caption,)
            ],
          ),
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('788.27', style: Theme.of(context).textTheme.title,),
              SizedBox(height: 2.0,),
              Text('gms', style: Theme.of(context).textTheme.caption,)
            ],
          ),
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('$currencySymbol 30,125.00', style: Theme.of(context).textTheme.title,),
              SizedBox(height: 2.0,),
              Text('current value', style: Theme.of(context).textTheme.caption,)
            ],
          )
        ],
      ),
    );
  }

  Container tile3() {
    return Container(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Row(
                children: <Widget>[
                  Text('24k', style: Theme.of(context).textTheme.title,),
                  SizedBox(width: 5.0),
                  Image.asset('assets/country_flags/in.png',width: 20.0,height: 20.0,)
                ],
              ),
              SizedBox(height: 2.0,),
              Text('$currencySymbol 3,678.00', style: Theme.of(context).textTheme.subtitle,),
              SizedBox(height: 2.0,),
              Text('May 3, 13:40 IST', style: Theme.of(context).textTheme.caption,)
            ],
          ),
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('35.00', style: Theme.of(context).textTheme.title,),
              SizedBox(height: 2.0,),
              Text('gms', style: Theme.of(context).textTheme.caption,)
            ],
          ),
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('$currencySymbol 34,355.00', style: Theme.of(context).textTheme.title,),
              SizedBox(height: 2.0,),
              Text('current value', style: Theme.of(context).textTheme.caption,)
            ],
          )
        ],
      ),
    );
  }

  Container tile4() {
    return Container(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Row(
                children: <Widget>[
                  Text('24k', style: Theme.of(context).textTheme.title,),
                  SizedBox(width: 5.0),
                  Image.asset('assets/country_flags/in.png',width: 20.0,height: 20.0,)
                ],
              ),
              SizedBox(height: 2.0,),
              Text('$currencySymbol 3,678.00', style: Theme.of(context).textTheme.subtitle,),
              SizedBox(height: 2.0,),
              Text('May 3, 13:40 IST', style: Theme.of(context).textTheme.caption,)
            ],
          ),
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('35.00', style: Theme.of(context).textTheme.title,),
              SizedBox(height: 2.0,),
              Text('gms', style: Theme.of(context).textTheme.caption,)
            ],
          ),
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('$currencySymbol 34,355.00', style: Theme.of(context).textTheme.title,),
              SizedBox(height: 2.0,),
              Text('current value', style: Theme.of(context).textTheme.caption,)
            ],
          )
        ],
      ),
    );
  }

Where am I making the mistake? 我在哪里犯错？ Any idea on how to make this layout responsive so they stay aligned as shown in the mockup. 关于如何使此布局具有响应性的任何想法，以使它们保持一致，如模型中所示。

1 个解决方案

解决方案1
 0  2019-05-19 17:52:44

To make a group of children take the same space between each other, wrap them in Expanded : 为了使一组孩子彼此之间具有相同的空间，请将它们包裹在Expanded ： 

Container tile1() {
  return Container(
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[
        Expanded(
          // Your column
        ),
        Expanded(
          // Your column
        ),
        Expanded(
          // Your column
        )
      ],
    ),
  );
}

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 Flutter 文本不在行内换行 - Flutter text is not wrapping inside Row 如何在 flutter 的嵌套行/列中使用文本溢出？ - How to use text overflow inside nested row/columns in flutter? 在颤动中单击文本时如何调整文本大小？ - how to resize text while click on text in flutter? 如何在 ListView 中的 flutter 中创建一行可滚动的文本框或小部件？ - how to create a row of scrollable text boxes or widgets in flutter inside a ListView? 如何在 Flutter 中根据屏幕大小调整文本大小？ - How to resize text based on screen size in Flutter? 如何根据内容自动调整 flutter 中的卡片视图大小 - how to auto resize card view in flutter based on the content 如果文本溢出，如何自动换行 flutter - How to Auto New Line if a text overflows flutter Flutter - 如何将两列放在一行中，一列展开，另一列适合其内容文本？ - Flutter - How to put two Columns inside a Row, one Column expanded, the other fit its content text? 如何在 flutter 中的嵌套行内对齐元素 - How to align element inside a nested Row in flutter 如何在 flutter 的列中插入一行 - how to insert a row inside a column in flutter
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM