Flutter-如何使用图像高度设置textview高度并用2行换行

Question

我是Flutter的新手，在列表屏幕的自动换行中遇到问题。

我当前的代码如下：

Container(
                      width: double.infinity,
                      padding: EdgeInsets.all(Dimen.padding),
                      color: AppTheme.buildLightTheme().backgroundColor,
                      child: Row(
                        mainAxisSize: MainAxisSize.max,
                        mainAxisAlignment: MainAxisAlignment.start,
                        children: <Widget>[
                          ClipRRect(
                              borderRadius: BorderRadius.circular(20),
                              child:                                      
                                  Image.asset('assets/images/bike1.jpg',
                                      height: 80, width: 80, fit: BoxFit.cover)                                  
                              ),
                          SizedBox(
                            width: 16,
                          ),
                          Column(
                          verticalDirection: VerticalDirection.down,
                            mainAxisSize: MainAxisSize.min,
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: <Widget>[
                              Flexible(
                                  child: Text(
                                modelData.titleTxt,
                                style: (TextStyles.bldTextview),
                                overflow: TextOverflow.ellipsis,
                              )),
                              SizedBox(
                                width: 6,
                              ),
                              Flexible(
                                  child: Text(modelData.subTxt,
                                      overflow: TextOverflow.ellipsis,
                                      style: (TextStyles.regularTextview)))
                            ],
                          )
                        ],
                      ),
                    )

此代码的输出是：

我想要实现的目标是这样的：

如何做到？

Answer 1

在您期望的输出屏幕截图中，根据标题使用的行数，每张卡的maxLines都有不同的值。但是Flutter的当前Text小部件实现中没有可用的属性。

好吧，您可以通过使用LayoutBuilder检查可用空间来解决此问题，并根据可用高度设置maxLines值。

请参见以下示例。

 Container(
      padding: new EdgeInsets.all(15.0),
      width: 150.0,
      height: 110.0,
      color: Colors.red,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text(
            'I take up as much space as possible.',
            style: const TextStyle(fontWeight: FontWeight.bold),
          ),
          Expanded(
            child: LayoutBuilder(
                builder: (BuildContext context, BoxConstraints constraints) {
                  print(constraints);
              return Text(
                'The space I have is very limited. I get ellipsed.',
                overflow: TextOverflow.ellipsis,
                maxLines: (constraints.maxHeight / Theme.of(context).textTheme.body1.fontSize).floor(),
              );
            }),
          ),
        ],
      ),
    ),

Answer 2

只需在标题和副标题栏中添加扩展小部件。

Container(
                      width: double.infinity,
                      padding: EdgeInsets.all(Dimen.padding),
                      color: AppTheme.buildLightTheme().backgroundColor,
                      child: Row(
                        mainAxisSize: MainAxisSize.max,
                        mainAxisAlignment: MainAxisAlignment.start,
                        children: <Widget>[
                          ClipRRect(
                            borderRadius: BorderRadius.circular(20),
                            child: Image.asset('assets/images/bike1.jpg',
                                height: 80, width: 80, fit: BoxFit.cover),
                          ),
                          SizedBox(
                            width: 16,
                          ),
                          Expanded(
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              mainAxisSize: MainAxisSize.max,
                              children: <Widget>[
                                Text(
                                  modelData.titleTxt,
                                  maxLines: 2,
                                  style: (TextStyles.bldTextview),
                                  overflow: TextOverflow.ellipsis,
                                ),
                                SizedBox(
                                  width: 6,
                                ),
                                Text(modelData.subTxt,
                                    maxLines: 2,
                                    overflow: TextOverflow.ellipsis,
                                    style: (TextStyles.regularTextview)),
                              ],
                            ),
                          )
                        ],
                      ),
                    )