颤抖的文字小部件

Question

我正在使用此代码来创建显示用户的groupchats（仅浅灰色部分）的小部件：

    class GroupchatWidget extends StatefulWidget {
  Groupchat groupchat;

  @override
  State<GroupchatWidget> createState() => _GroupchatWidgetState();

  GroupchatWidget(this.groupchat, {Key? key}) : super(key: key);
}

class _GroupchatWidgetState extends State<GroupchatWidget> {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(top: 5, bottom: 5),
      child: Container(
        decoration: BoxDecoration(
            color: Theme.of(context).focusColor,
            borderRadius: BorderRadius.circular(15)),
        child: Padding(
          padding: const EdgeInsets.all(10),
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              FutureBuilder<ImageProvider>(
                future: Buttons.getGroupchatImage(widget.groupchat.Id, context),
                builder: (BuildContext context,
                    AsyncSnapshot<ImageProvider> snapshot) {
                  return CircleAvatar(
                    radius: 25,
                    foregroundImage: snapshot.data,
                    backgroundImage: Settings.DefaultGroupchatImage,
                  );
                },
              ),
              Padding(
                padding: const EdgeInsets.only(left: 10),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Padding(
                      padding: const EdgeInsets.only(top: 2),
                      child: Text(
                        widget.groupchat.Name,
                        style: const TextStyle(
                            fontSize: 15, fontWeight: FontWeight.bold),
                      ),
                    ),
                    FutureBuilder<void>(
                      future: Buttons.getNewGroupchatMessages(
                          widget.groupchat.Id, context),
                      builder:
                          (BuildContext context, AsyncSnapshot<void> snapshot) {
                        return Text(
                          Cache.getLastMessage(widget.groupchat.Id).Text,
                          style: const TextStyle(fontSize: 15),
                        );
                      },
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

在聊天的NA下（堆栈溢出疯狂）是最后一条消息的文本。但是，当此文本太长时，它会被x像素溢出。这是一个屏幕截图： 我如何防止这种情况？

Answer 1

您可以使用ListTile小部件。

ListTile(
leading: ImageAvatar(),
title: Text('your title'),
subtitle: Text('detailed text with property to putt dots at the end ',
overflow: TextOverflow.ellipsis,)),

Answer 2

WARP 列带有展开的两个小部件文本，

row rilding [circleavatar，expaned expaned ＆gt; 列儿童[text，text]]

尝试以下操作：

import 'package:flutter/material.dart';

class GroupchatWidget extends StatefulWidget {
  Groupchat groupchat;

  @override
  State<GroupchatWidget> createState() => _GroupchatWidgetState();

  GroupchatWidget(this.groupchat, {Key? key}) : super(key: key);
}

class _GroupchatWidgetState extends State<GroupchatWidget> {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(top: 5, bottom: 5),
      child: Container(
        decoration: BoxDecoration(
            color: Theme.of(context).focusColor,
            borderRadius: BorderRadius.circular(15)),
        child: Padding(
          padding: const EdgeInsets.all(10),
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              FutureBuilder<ImageProvider>(
                future: Buttons.getGroupchatImage(widget.groupchat.Id, context),
                builder: (BuildContext context,
                    AsyncSnapshot<ImageProvider> snapshot) {
                  return Container(
                    height: 60,
                    width: 60,
                    child: CircleAvatar(
                      radius: 25,
                      foregroundImage: snapshot.data,
                      backgroundImage: Settings.DefaultGroupchatImage,
                    ),
                  );
                },
              ),
              Expanded(
                child: Padding(
                  padding: const EdgeInsets.only(left: 10),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Padding(
                        padding: const EdgeInsets.only(top: 2),
                        child: Text(
                          widget.groupchat.Name,
                          style: const TextStyle(
                              fontSize: 15, fontWeight: FontWeight.bold),
                        ),
                      ),
                      FutureBuilder<void>(
                        future: Buttons.getNewGroupchatMessages(
                            widget.groupchat.Id, context),
                        builder: (BuildContext context,
                            AsyncSnapshot<void> snapshot) {
                          return Text(
                            Cache.getLastMessage(widget.groupchat.Id).Text,
                            //if you want only 1 line text
                            //overflow: TextOverflow.ellipsis,
                            //maxLines: 1,
                            style: const TextStyle(fontSize: 15),
                          );
                        },
                      ),
                    ],
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Answer 3

 Expanded(
                  flex:1,
                  child: Text(
                     'Text',overflow: TextOverflow.clip,
                  ),
                ),

或者

Wrap(
  children: [Text('Text',overflow: TextOverflow.clip, ),])