Question

我有一个包含两个文本的堆栈..有时其中一个文本确实很长，它将像这样在两行中显示：

所以我试图像这样使用FittedBox：

new Container(
                                                height: 44.0,
                                                decoration: BoxDecoration(
                                                  borderRadius: BorderRadius
                                                      .all(const Radius
                                                          .circular(30.0)),
                                                  border: new Border.all(
                                                      color:
                                                          Color(0xff606060),
                                                      width: 2.5),
                                                ),
                                                child: new Stack(
                                                  children: <Widget>[
                                                    Align(
                                                      alignment: globals
                                                                  .currentLang ==
                                                              'ar'
                                                          ? Alignment
                                                              .centerRight
                                                          : Alignment
                                                              .centerLeft,
                                                      child: Padding(
                                                        padding:
                                                            EdgeInsets.only(
                                                                right: 15.0,
                                                                left: 15.0),
                                                        child:  FittedBox(
                                                          fit: BoxFit
                                                              .contain,
                                                          child: Text(
                                                          ),
                                                        ),
                                                      ),
                                                    ),
                                                    Align(
                                                      alignment: globals
                                                                  .currentLang ==
                                                              'ar'
                                                          ? Alignment
                                                              .centerLeft
                                                          : Alignment
                                                              .centerRight,
                                                      child: Padding(
                                                        padding:
                                                            EdgeInsets.only(
                                                                left: 15.0,
                                                                right:
                                                                    15.0),
                                                        child: new Text(
                                                        ),
                                                      ),
                                                    ),
                                                  ],
                                                ),
                                              ),

我得到了这个结果：

我要在两个文本之间留一个空格，这样它才不会被彼此覆盖..该如何解决？

更新：

更新2：

Answer 1

如果可以缩放仅右对齐的文本，请检查此解决方案。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>
    <style>
.textSwap
{
min-width:200px;
}
    .textSwap::before {
        content: "Add to Cart";
    }
    .textSwap:hover::before {
        content: "Please Select";
    }
    </style>
    <button type="button" class="btn btn-secondary btn-lg textSwap"></button>

更新：

用Flex代替Row and Expanded看起来更好。看看

Container(
    height: 44.0,
    decoration: BoxDecoration(
        borderRadius: BorderRadius.all(const Radius.circular(30.0)),
        border: Border.all(color: Color(0xff606060), width: 2.5),
    ),
    padding: EdgeInsets.all(8.0),
    child: Row(
        children: <Widget>[
            Text('Some text'),
            SizedBox(width: 8.0),
            Expanded(
                child: FittedBox(
                    fit: BoxFit.scaleDown,
                    child: Text(
                        'Demo text. Long demo text. Duplicated long demo text.',
                        textAlign: TextAlign.end
                    )
                )
            )
        ],
    ),
)

在堆栈中拟合文本

1 个答案: