dart - 如何在颤动中自动调整行内的文本大小

Question

我正在尝试复制以下 UI。我想显示一个项目列表，其中每个项目平均分布为 3 个部分（参见下图）。我想达到同样的响应能力。但我无法将它们排列整齐。这是样机：

这是我取得的成就：

这是我的代码：

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,)
            ],
          )
        ],
      ),
    );
  }

我在哪里犯错？关于如何使此布局响应的任何想法，以便它们保持对齐，如模型中所示。

标签： dartflutterflutter-layout

Answer 1

要使一组孩子彼此之间占据相同的空间，请将它们包装在Expanded：

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