Question

我正在尝试复制以下用户界面。我想显示一个项目列表，其中每个项目平均分为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,)
            ],
          )
        ],
      ),
    );
  }

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

Answer 1

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

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

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

1 个答案: