Question

我正在用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尝试使内容看起来像这样，但出现溢出错误

Answer 1

使用展开后的包装填充

Expanded(
                      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',
                              overflow: TextOverflow.ellipsis,
                            )
                          ],
                        ),
                      ),
                    )

Answer 2

您可以将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,
            )
          ],
        ),
      ),
    );

结果：

颤振中的文字换行

2 个答案: