颤振溢出文本小部件

Question

我使用这段代码创建显示用户群聊天的小部件(只显示浅灰部分)：

    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 Widget。

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

Answer 2

用Column扭曲两个小部件文本的Expanded，

Row儿童[ CircleAvatar，Expaned > Column Column 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, ),])