Flutter 忽略溢出和换行设置

Question

我想弄清楚为什么 Flutter 会忽略我的文本小部件上的溢出和换行设置

Card(
            borderOnForeground: true,
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(12.0),
              side: BorderSide(
                color: Colors.grey[200],
                width: 1.0,
              ),
            ),
            child: Padding(
                padding:
                    const EdgeInsets.symmetric(horizontal: 10, vertical: 10),
                child: Column(children: [
                  Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Row(
                          children: [
                            CircleAvatar(
                                backgroundImage:
                                    widget.user.profileImageUrl.isEmpty
                                        ? const AssetImage(
                                            'assets/images/avatar-5.png')
                                        : CachedNetworkImageProvider(
                                            widget.user.profileImageUrl,
                                          )),
                            const SizedBox(width: 10),
                            Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  Text(
                                      '${widget.user.firstName} ${widget.user.lastName[0]}'),
                                  Text(task.desc,
                                      overflow: TextOverflow.fade,
                                      maxLines: 2,
                                      softWrap: false,
                                      style: Theme.of(context)
                                          .textTheme
                                          .bodyText1),
                                ]),
                          ],
                        ),
                        Row(children: [
                          const Icon(Icons.calendar_today_outlined, size: 12),
                          const SizedBox(width: 6),
                          Text(DateFormat('E, d MMM').format(task.due),
                              style: Theme.of(context).textTheme.caption)
                        ]),
                      ]),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: [
                      _buildBudget(formatCurrency.format(widget.task.budget))
                    ],
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      Row(children: [
                        const Icon(Icons.location_on_outlined, size: 12),
                        const SizedBox(width: 6),
                        Text(task.location,
                            style: Theme.of(context).textTheme.caption)
                      ]),
                    ],
                  ),

Answer 1

将您的 Column 包裹在 Expanded.. 中应该可行

Expanded(child:Column(...))

并尝试在此处添加 Expanded（换行 Row）（代码的最后一行）：

Padding(
                padding:
                    const EdgeInsets.symmetric(horizontal: 10, vertical: 10),
                child: Column(children: [
                  Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Expanded(child:Row(  ////HERE

Row没有指定宽度。所以其中一个孩子应该有一个 Expanded

好的，我已经测试过了……这里是完整的代码：

Card(
        borderOnForeground: true,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(12.0),
          side: BorderSide(
            color: Colors.grey,
            width: 1.0,
          ),
        ),
        child: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 10),
            child: Column(children: [
              Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Expanded(
                      child: Row(
                        children: [
                          CircleAvatar(backgroundImage: const AssetImage('assets/images/avatar-5.png')),
                          const SizedBox(width: 10),
                          Expanded(
                            child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
                              Text('${'widget.user.firstName'} '),
                              Text('task.desc',
                                  overflow: TextOverflow.fade,
                                  maxLines: 2,
                                  softWrap: false,
                                  style: Theme.of(context).textTheme.bodyText1),
                            ]),
                          ),
                        ],
                      ),
                    ),
                    Row(children: [
                      const Icon(Icons.calendar_today_outlined, size: 12),
                      const SizedBox(width: 6),
                      Text('DateFormat( ).format(task.due)', style: Theme.of(context).textTheme.caption)
                    ]),
                  ]),
              Row(
                mainAxisAlignment: MainAxisAlignment.end,
                children: [Text('dff')],
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Row(children: [
                    const Icon(Icons.location_on_outlined, size: 12),
                    const SizedBox(width: 6),
                    Text('task.location', style: Theme.of(context).textTheme.caption)
                  ])
                ],
              )
            ])));

Answer 2

这是一个类似的问题，可能对你有帮助：

要达到预期的效果，您必须告诉您的文本小部件 space 它们应该占用多少。例如，用 Flexible 或 Expanded.

包装您的列（溢出文本小部件的父级）

我试图将您的示例缩小一点以使其更明显：

class CardWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Card(
      child: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 10),
        child: Column(
          children: [
            // Your other widegts
            // Row(children: [ ... ]),
            Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                // Your circle avatar with a constant size
                Container(width: 50, height: 50, color: Colors.red),
                const SizedBox(width: 10),
                // The important part
                Expanded(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      const Text('Firstname Lastname'),
                      const Text(
                          'Really long description that does not fit on to the screen',
                          overflow: TextOverflow.fade,
                          maxLines: 2),
                    ],
                  ),
                ),
              ],
            ),
            // Your other widegts
            // Row(children: [ ... ]),
          ],
        ),
      ),
    );
  }
}

请注意，您应该删除 softWrap: false。如果为 false，文本中的字形将被定位为好像有无限的水平 space。

如果文字超过2行，会出现淡化溢出效果。如果您不希望这样，只需删除 maxLines 属性即可。

完整示例

这是一个完整的结构示例，它将在 ListView 假设位置、日期和预算小部件应位于同一行中：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ListView(shrinkWrap: true, children: [
        CardWidget(),
        CardWidget(),
        CardWidget(),
      ]),
    );
  }
}

class CardWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Card(
      borderOnForeground: true,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(12.0),
        side: BorderSide(
          width: 1.0,
        ),
      ),
      child: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 10),
        child: Column(
          children: [
            Row(
              children: [
                Container(height: 50, width: 50, color: Colors.red),
                const SizedBox(width: 10),
                Expanded(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text('Firstname Lastname'),
                      Text(
                          "Long text that exceeds multiple lines. Long text that exceeds multiple lines. Long text that exceeds multiple lines",
                          overflow: TextOverflow.fade,
                          maxLines: 3,
                          style: Theme.of(context).textTheme.bodyText1),
                    ],
                  ),
                ),
              ],
            ),
            const SizedBox(height: 25),
            Row(
              children: [
                // Location and Date
                Row(
                  mainAxisSize: MainAxisSize.min,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    const Icon(Icons.location_on_outlined, size: 12),
                    const SizedBox(width: 6),
                    Text("Location"),
                  ],
                ),
                const SizedBox(width: 25),
                Row(
                  mainAxisSize: MainAxisSize.min,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    const Icon(Icons.calendar_today_outlined, size: 12),
                    const SizedBox(width: 6),
                    Text("Date"),
                  ],
                ),
                // The budget widget
                Expanded(child: Container()),
                Text("200"),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

Answer 3

用 Flexible 包裹子列：

Column(
    mainAxisSize : MainAxisSize.min,
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
         Flexible (child :Text(
              '${widget.user.firstName} ${widget.user.lastName[0]}')),
         Flexible (
               child :Text(task.desc,
               overflow: TextOverflow.fade,
               maxLines: 2,
               softWrap: false,
               style: Theme.of(context)
                   .textTheme
                   .bodyText1)),
               ]),

Flutter 忽略溢出和换行设置

Flutter ignoring overflow and wrap settings

text

overflow

flutter