Flutter中列內的行中的TextOverflow

Question

我正在嘗試開發一個卡片，它下面有一些文本小部件。 看看下面的圖片。

我面臨的問題是當位置圖標旁邊的文本很大時，它會溢出。 我已經嘗試過 Flex，但它會引發異常。 卡片右下角還有一個星形圖標。

這是我想要的：

1. 如果文本太長，我希望文本是以 .. 結尾的單行。
2. 星星應該放在右下角
3. 位置圖標不考慮我給的左填充（填充小部件）

請幫忙！ 提前致謝。

這是我的代碼：

Scaffold buildOffersList(OfferModel offerModel) {
      return Scaffold(
          body: Stack(
            children: <Widget>[
              Center(
                child: Image.network(
                    'https://b.zmtcdn.com/data/pictures/2/19250332/0fe23bee17b60d181fd43421ca3480d4_featured_v2.jpg',
                    fit: BoxFit.cover,
                    width: size.width,
                    height: size.height,
                    color: Colors.black.withOpacity(.6),
                    colorBlendMode: BlendMode.darken
                ),
              ),
              Column(
                children: <Widget>[
                  Container(
                    child: PageHeader(pageTitle: 'Popular Offers', numberOfOffers: '20 venues', sortByText: 'Sort By: Location', filterText: 'Filter'),
                  ),
                  Expanded(
                    child: GridView.count(
                      crossAxisCount: 2,
                      mainAxisSpacing: 5.0,
                      crossAxisSpacing: 5.0,
                      padding: const EdgeInsets.only(left: 10.0, right: 10.0),
                      children: List.generate(offerModel.payload.offers.length, (index) {
                        return Center(
                          child: offerCard3(offerModel.payload.offers[index]),
                        );
                      }),
                    ),
                  ),
                ],
              ),
            ],
          )
      );
    }

Widget offerCard3(Offer offer) {
      return GestureDetector(
        child: Card(
          elevation: 1.0,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(0.0),
          ),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              AspectRatio(
                aspectRatio: 18.0 / 8.0,
                child: Image.network(
                  "https://b.zmtcdn.com/data/pictures/2/19250332/0fe23bee17b60d181fd43421ca3480d4_featured_v2.jpg",
                  fit: BoxFit.cover,
                ),
              ),
              Padding(
                padding: EdgeInsets.fromLTRB(7.0, 5.0, 4.0, 5.0),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    getBrandName(offer),
                    getOfferTitle(offer),
                    SizedBox(height: 15.0),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      mainAxisSize: MainAxisSize.max,
                      children: <Widget>[
                        Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[

                            Row(
                              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                              children: <Widget>[
                                getLocationIcon(),
                                getOfferContactAddressView(offer),
                              ],
                            ),
                            getKmText(),
                          ],
                        ),

                        //Spacer(),
                        getStarIcon(),


                      ],
                    ),

                  ],
                ),
              ),
            ],
          ),
        ),
      );
    }

Text getOfferContactAddressView(Offer offer) {
      return Text(
        offer.offerContactAddress,
        maxLines: 1,
        overflow: TextOverflow.ellipsis,
        style: TextStyle(
          color: Colors.black38,
          fontSize: 9.0,
        ),
      );
    }

    Icon getStarIcon() {
      return Icon(
        Icons.star,
        color: Colors.orange,
        size: 25,
      );
    }

Answer 1

強烈推薦第一個解決方案

首先，您可以使用 Listtile。

ListTile(title: Text("ListTile"),
         subtitle: Text("Sample Subtitle. \nSubtitle line 3"),
         trailing: Icon(Icons.home),
         leading: Icon(Icons.add_box),
         isThreeLine: true,
)

第二種解決方案

                   SizedBox(
                        width: 500,
                        child: new Text(
                          'Text largeeeeeeeeeeeeeeeeeeeeeee',

                          //Overflow: TextOverflow.ellipsis will make you large text end with ....

                          overflow: TextOverflow.ellipsis,
                          style: new TextStyle(
                            fontSize: 13.0,
                          ),
                        ),
                      ),

Answer 2

有一個用於自動調整文本大小以包含全文的顫振包。

auto_size_text 2.1.0在這里

Answer 3

這是因為Text Widget不知道Row的寬度有多大。

請在DartPad上試用此代碼，以幫助您找到代碼出錯的地方。 我仍然相信，用Expanded包裝Text Widget並提供overflow property將立即提供您想要的。

這是它的SS：

Answer 4

我認為您必須使用如下代碼：-

Expanded(
          child: Wrap(
            direction: Axis.horizontal,
            runAlignment: WrapAlignment.start,
            children: <Widget>[
              getOfferContactAddressView(offer),
            ],
          ),
          flex: 1,
        ),

Answer 5

試試下面的代碼：

             Center(
                child: Container(
                  margin: EdgeInsets.only(
                    top: 0,
                    bottom: 10,
                    left: 0,
                    right: 0,
                  ),
                  child: Row(
                    children: <Widget>[
                      Expanded(
                        child: Padding(
                          padding: EdgeInsets.only(top: 0, bottom: 0),
                          child: Text('large Text here.............',
                            style: TextStyle(color: Colors.grey),
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ),