Flutter忽略了溢出和换行设置。

18 浏览
0 Comments

Flutter忽略了溢出和换行设置。

我正在努力了解Flutter为什么忽略了我的Text控件中的overflow和wrap设置。

\"enter

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)
                      ]),
                    ],
                  ),

admin 更改状态以发布 2023年5月21日
0
0 Comments

将您的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)
                  ])
                ],
              )
            ])));

0
0 Comments

这里有一个类似的问题,可能会对你有帮助:

Flutter - Wrap text on overflow, like insert ellipsis or fade


要实现所需的效果,您必须告诉文本小部件它们应该占用多少空间。例如,通过使用 FlexibleExpanded 包装您的列(溢出文本小部件的父级)。

我试图简化您的示例,使其更明显:

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,则文本中的字形将定位得好像有无限的水平空间。

如果文本超过两行,淡化的溢出效果将可见。如果您不想要这个效果,只需删除 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"),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

0