颤振中的文字换行

debugcn 发表于 Dev

埃斯瓦尔·萨拉迪（Eswar Saladi）

我正在用flutter编写一个看起来像这样的项目的小部件，我是flutter的新手，我正在尝试模仿下面的卡

到目前为止，这是我的小部件代码

import 'package:flutter/material.dart';
import 'package:smooth_star_rating/smooth_star_rating.dart';

class TrailCard extends StatelessWidget {
  const TrailCard({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Card(
          shape:
              RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
          child: InkWell(
            onTap: () {},
            child: Padding(
                padding: const EdgeInsets.all(16.0),
                child: Row(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    ClipRRect(
                      borderRadius: BorderRadius.circular(20.0),
                      child: Image.asset(
                        'assets/images/cocoa.jpg',
                        height: 100,
                        width: 90,
                        fit: BoxFit.fitHeight,
                      ),
                    ),
                    Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(
                            "Boring Cocoa",
                            style: TextStyle(
                                fontSize: 18, fontWeight: FontWeight.bold),
                          ),
                          Text('Rajhamundry, AP'),
                          Text(
                            'Feel the authentic flavours of life while you visit the farms around Rajahmundry',
                            overflow: TextOverflow.ellipsis,
                          )
                        ],
                      ),
                    ),
                  ],
                )),
          )),
    );
  }
}

我尝试使用flexible和Expanded尝试使内容看起来像这样，但出现溢出错误

Timilehin Jegede

您可以使用Padding小部件包装小Flexible部件，以便仅占用所需的空间：

注意：您还应该设置Text小部件在显示省略号之前应采取的最大行数。

Flexible(
      // new line
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              "Boring Cocoa",
              style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
            ),
            Text('Rajhamundry, AP'),
            Text(
              'Feel the authentic flavours of life while you visit the farms around Rajahmundry more text to cause overflow',
              // set maximum number of lines the text should take
              maxLines: 3, // new line
              overflow: TextOverflow.ellipsis,
            )
          ],
        ),
      ),
    );

结果：