flutter：如何使文本在一两行中不溢出？

Question

我有这张图片，在这张图片中我有联系部分。 我想做这样的。

Row(
  children: [
    // Flexible(
    //   child: RichText(
    //     // textAlign: TextAlign.left,
    //     text: TextSpan(
    //         text: "Contact: ",
    //         style: textStyleWith12500(
    //             MyColor.blackColor),
    //         children: <TextSpan>[
    //           TextSpan(
    //             text:
    //             "$outletEmail",
    //             style: textStyleWith10400(
    //                 MyColor.darkGreyColor),
    //           ),
    //         ]),
    //   ),
    // ),
        Flexible(
          child: Text("Contact: ",
              style: textStyleWith12500(
                  MyColor.blackColor)),
        ),
    Flexible(
      child: Text(
        "$outletEmail",
        style: textStyleWith10400(
            MyColor.darkGreyColor),
      ),
    ),
    Flexible(
      child: Container(
          padding: EdgeInsets.only(left: 5,right: 5),
          height:10,child: VerticalDivider(color: MyColor.blackColor,width: 2)),
    ),
    Flexible(
      child: Text(
        "$outletContact",
        style: textStyleWith10400WithUnderLine(
            MyColor.blueColor),
        maxLines: 1,
        overflow: TextOverflow.ellipsis,
      ),
    ),
  ],
),

Answer 1

一种方法是，如果宽度受到限制，您可以添加

FittedBox

。该小部件将自动调整文本大小以适合一行。

Container(
   width: MediaQuery.of(context).size.width,
   child: FittedBox(
      fit: BoxFit.scaleDown,
      child: Text('Your Text'),
   ),
);

另一种方法是在

maxLines

小部件中指定

Text

并指定溢出样式。

Text(
  'your text',
  maxLines: 1,
  overflow: TextOverflow.ellipsis,
);