Question

我正在尝试按以下方式创建小部件：

但是小部件溢出，如下所示：

当文本长度增加时，就会发生溢出。所有的小部件（如“已回答”，“ 1月29日”）均不在用户界面范围之内。

我尝试如下：


    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Row(
          children: <Widget>[
            SizedBox(
              child: Text(
                "Tim Helmen James Bond Claffer Syllabus Mark Anthony",
                style: TextStyle(
                fontSize: 11.0,
                fontWeight: FontWeight.bold,
                color: ScreenColor.alreadyHaveAnAccountColor),
                overflow: TextOverflow.ellipsis,
                maxLines: 2,
              ),
            ),
            SizedBox(
              width: 4.0,
            ),
            Text(
                    "Answered",
                    style: TextStyle(
                      fontSize: 11.0,
                      fontWeight: FontWeight.w400,
                      color: ScreenColor.alreadyHaveAnAccountColor,
                    ),
                  )
             ,
             Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 10.0),
                    child: SizedBox(
                      width: 5.0,
                      height: 5.0,
                      child: Container(
                        color: ScreenColor.inputFieldBorderColor,
                      ),
                    ),
                  ),
                Text(
                    "Jan 20",
                    style: TextStyle(
                      fontSize: 11.0,
                      fontWeight: FontWeight.normal,
                      color: ScreenColor.inputFieldPlaceholderColor,
                    ),
                  ),
          ],
        ),
        SizedBox(
           height: 4.0,
         ),

        Row(
                children: <Widget>[
                  SizedBox(
                    child: Text(
                      "Doctor @ Kind Abdullah Specialist Children Hosptial",
                      maxLines: 2,
                      overflow: TextOverflow.ellipsis,
                    ),
                  ),
                  SizedBox(
                    width: 8.0,
                  ),
                  Image.asset('assets/images/icon-verified.png'),
                ],
              ),
      ],
    );

Answer 1

尝试使用Expanded吗？在我的情况下有效

Expanded(
              child: Text(
                "Tim Helmen James Bond Claffer Syllabus Mark Anthony",
                style: TextStyle(
                fontSize: 11.0,
                fontWeight: FontWeight.bold,
                color: ScreenColor.alreadyHaveAnAccountColor),
                overflow: TextOverflow.ellipsis,
                maxLines: 2,
              ),
            ),

Answer 2

您可以使用auto_size_text来减小文本溢出时的字体大小。

此外，您可以为该文本小部件设置maxLines属性，并将overflow属性设置为TextOverflow.ellipsis.

TextWidget溢出，并且以下元素在“行”窗口小部件抖动中不可见

2 个答案: