是否有可能让android studio打破颤振用户界面溢出的点？

Question

有时候，我的flutter 3.0.5应用程序会出现如下错误：

A RenderFlex overflowed by 19 pixels on the bottom

这是完整的日志输出：

flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196m══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞══════════════════════<…>
flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196mThe following assertion was thrown during layout:<…>
flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196mA RenderFlex overflowed by 19 pixels on the bottom.<…>
flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196m<…>
flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196mThe relevant error-causing widget was:<…>
flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196m  Column<…>
flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196m  Column:file:///Users/xiaoqiangjiang/source/reddwarf/frontend/cruise-open/lib/src/component/item_card.dart:21:18<…>
flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196m<…>
flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196mTo inspect this widget in Flutter DevTools, visit:<…>
flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196mhttp://127.0.0.1:9100/#/inspector?uri=http%3A%2F%2F127.0.0.1%3A64605%2F_iOWtrE2iUg%3D%2F&inspectorRef=inspector-2<…>
flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196m<…>
flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196mThe overflowing RenderFlex has an orientation of Axis.vertical.<…>
flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196mThe edge of the RenderFlex that is overflowing has been marked in<…>
flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196mthe rendering with a yellow and black striped pattern. This is<…>
flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196musually caused by the contents being too big for the RenderFlex.<…>
flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196mConsider applying a flex factor (e.g. using an Expanded widget)<…>
flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196mto force the children of the RenderFlex to fit within the<…>
flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196mavailable space instead of being sized to their natural size.<…>
flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196mThis is considered an error condition because it indicates that<…>
flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196mthere is content that cannot be seen. If the content is<…>
flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196mlegitimately bigger than the available space, consider clipping<…>
flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196mit with a ClipRect widget before putting it in the flex, or using<…>
flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196ma scrollable container rather than a Flex, like a ListView.<…>
flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196mThe specific RenderFlex in question is: RenderFlex#65cb2 OVERFLOWING:<…>
flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196m  parentData: offset=Offset(16.0, 16.0) (can use size)<…>
flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196m  constraints: BoxConstraints(w=358.0, h=65.0)<…>
flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196m  size: Size(358.0, 65.0)<…>
flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196m  direction: vertical<…>
flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196m  mainAxisAlignment: start<…>
flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196m  mainAxisSize: max<…>
flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196m  crossAxisAlignment: start<…>
flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196m  textDirection: ltr<…>
flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196m  verticalDirection: down<…>
flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196m◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤<…>
flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196m═════════════════════════════════════════════════════════════════<…>

从日志中，我可以发现有些设备是溢出的，但我在颤振应用程序UI中看不到任何溢出错误。以下是完整的代码：

import 'package:eva_icons_flutter/eva_icons_flutter.dart';
import 'package:flutter/material.dart';
import 'package:flutter_html/flutter_html.dart';
import 'package:cruise/src/models/Item.dart';

class ItemCard extends StatelessWidget {
  const ItemCard({
     Key? key,
    required this.item,
  }) : super(key: key);

  final Item item;

  @override
  Widget build(BuildContext context) {
    return Card(
      key: Key(item.id.toString()),
      child: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Container(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              if (item.domain != "")
                Text(
                  item.domain,
                  style: Theme.of(context).textTheme.caption,
                ),
              if (item.type == StoryType.comment)
                Text(
                  "Comment",
                  style: Theme.of(context).textTheme.caption,
                ),
              Padding(
                padding: const EdgeInsets.only(top: 8, bottom: 8.0),
                child: item.type == StoryType.comment
                    ? Html(data: item.content)
                    : Text(
                        item.title,
                        style: TextStyle(
                          fontSize: 16,
                          fontWeight: FontWeight.w600,
                        ),
                      ),
              ),
              Row(
                children: [
                  Padding(
                    padding: const EdgeInsets.only(right: 16.0),
                    child: Row(
                      children: [
                        Icon(
                          EvaIcons.clock,
                          size: 16,
                        ),
                        Padding(
                          padding: const EdgeInsets.only(left: 8.0),
                          child: Text(
                            item.ago,
                            textAlign: TextAlign.center,
                            style: Theme.of(context).textTheme.caption,
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

当颤振应用程序溢出发生时，能让android工作室自动停止或命中这条线吗？这样我就能知道代码的哪一部分溢出了。我该怎么做才能避免这个问题？这就是UI的样子：

​

​

Answer 1

这就是为什么您使用两个时间行，就像这样使用行

Padding(
            padding: const EdgeInsets.only(right: 16.0),
            child: Row(
              children: [
                Icon(
                  Icons.watch,
                  size: 16,
                ),
                Padding(
                  padding: const EdgeInsets.only(left: 8.0),
                  child: Text(
                    "item.ago",
                    textAlign: TextAlign.center,
                    style: Theme.of(context).textTheme.caption,
                  ),
                ),
              ],
            ),
          ),