如何打破这段文字使其不溢出？ - 颤振

Question

我有一个从数组构建列表的小部件。数组中的每个项目都构建了一个包含一些列和行的小部件。我希望文本中断，这样它就不会溢出。我试过将 overflow: TextOverflow.ellipsis 添加到文本中，或者将包含图标的行和用扩展小部件溢出的文本进行包装，但两者都没有用。

实际上它看起来像这样：

这是我的代码：

child: Column(
    verticalDirection: VerticalDirection.down,
    textBaseline: TextBaseline.alphabetic,
    textDirection: TextDirection.ltr,
    children: < Widget > [
        Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: < Widget > [
                Row(
                    children: [
                        const Icon(Icons.medication),
                            //
                            // This is the text that overflows
                            //
                            Text(
                                entries[index].pillname,
                                style: const TextStyle(
                                    fontSize: 25,
                                    fontWeight: FontWeight.bold,
                                ),
                            ),
                    ],
                ),
                Text(
                    entries[index].pillTimeStr,
                    style: const TextStyle(
                        fontSize: 28,
                        color: Color.fromARGB(255, 79, 79, 79),
                    ),
                ),
            ],
        ),
        Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: < Widget > [
                Container(
                    margin: const EdgeInsets.all(4),
                        child: FloatingActionButton(
                            onPressed: () {
                                setState(() {
                                    entries[index].pilldone = !entries[index].pillDone;
                                });
                            },
                            tooltip:
                            entries[index].pillDone ? 'Tomada' : 'No tomada',
                            backgroundColor: entries[index].pillDone ?
                            Colors.green :
                            Theme.of(context).primaryColor,
                            child: const Icon(Icons.check),
                        ),
                ),
                Container(
                    margin: const EdgeInsets.all(4),
                        child: FloatingActionButton(
                            onPressed: () {
                                showAdaptiveActionSheet(
                                    context: context,
                                    cancelAction: CancelAction(
                                        title: const Text('Cancelar'),
                                    ),
                                    actions: < BottomSheetAction > [
                                        BottomSheetAction(
                                            title: const Text('Modificar'),
                                                onPressed: () {}),
                                        BottomSheetAction(
                                            title: const Text('Eliminar'),
                                                onPressed: () {
                                                    Navigator.pop(context);
                                                    _askRemovePill(entries[index].iD);
                                                }),
                                    ]);
                            },
                            tooltip: 'Eliminar',
                            backgroundColor: Colors.blue,
                            child: const Icon(Icons.mode_edit),
                        )),
            ],
        ),
    ],
),

Answer 1

对于您的情况，您需要做的就是使用扩展小部件将文本包裹在行中

Expanded(
    child: Text(/*......your text widget........*/),
),

扩展小部件为您的文本小部件提供水平约束

如果您不希望看到文本继续到下一行，在文本

上使用溢出属性

overflow : TextOverflow.ellipsis, //inside Text

Answer 2

使用 Wrap 小部件而不是 Row 小部件。如果有溢出，它将把文本换到下一行。像这样，

         Wrap(
                children: [
                    const Icon(Icons.medication),
                        //
                        // This is the text that overflows
                        //
                        Text(
                            entries[index].pillname,
                            style: const TextStyle(
                                fontSize: 25,
                                fontWeight: FontWeight.bold,
                            ),
                        ),
                ],
            ),
            Text(
                entries[index].pillTimeStr,
                style: const TextStyle(
                    fontSize: 28,
                    color: Color.fromARGB(255, 79, 79, 79),
                ),
            ),
        ],
    ),

如何打破这段文字使其不溢出？ - 颤振

How to break this text so it doesn't overflow? - Flutter

flutter

dart