时间戳

首页 > 解决方案 > FittedBox 的无界约束在 Expanded inside container with width

flutter - FittedBox 的无界约束在 Expanded inside container with width

问题描述

我正在努力做到这一点：

[Buy                $5,99"]

为此，我使用flex. 第一个 forBuy和第二个 for $5,99，我显然向右对齐。

但是，我不能让它工作。我试过FittedBox了，但也尝试了其他的东西。我明白了

RenderFlex children have non-zero flex but incoming width constraints are unbounded.

这是没有意义的，因为扩展是在定义的容器内width。

     Expanded(
          child: Container(
              decoration: BoxDecoration(
                color: Colors.red,
                borderRadius: BorderRadius.only(
                  bottomLeft: const Radius.circular(ROUNDNESSS),
                  bottomRight: const Radius.circular(ROUNDNESSS),
                ),
              ),
              child: FittedBox(
                  fit: BoxFit.fitWidth,
                  child: Row(
                    children: [
                      Flexible(
                          child: Text("Buy",
                              style: TextStyle(
                                color: Colors.white,
                                fontSize: 17,
                                fontWeight: FontWeight.w700,
                                fontFamily: 'Roboto',
                              )),
                          flex: 1),
                      Flexible(
                          child: Text("\$5,99",
                              style: TextStyle(
                                color: Colors.white,
                                fontSize: 17,
                                fontWeight: FontWeight.w700,
                                fontFamily: 'Roboto',
                              )),
                          flex: 1)
                    ],
                  ))),
          flex: 3)

标签： flutterdart

解决方案

您不能展开文本小部件。容器可以扩展，因此将每个文本小部件包装在一个容器中是一个开始。现在，容器不会改变它们的尺寸，除非它们被展开。现在在 Expanded 中，您有一个名为 flex 的属性，它可以工作。这是一些工作代码。

class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
  return Container(
    color: Colors.cyan,
    height: MediaQuery.of(context).size.height,
    width: MediaQuery.of(context).size.width,
    child: Center(
      child: Row(
        children: [
          Expanded(
            flex: 1,
            child: Container(
              color: Colors.red,
              child: Text("\$5,99",
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 17,
                    fontWeight: FontWeight.w700,
                    fontFamily: 'Roboto',
                  )),
            ),
          ),
          Expanded(
            flex: 1,
            child: Container(
              color: Colors.blue,
              child: Text("Buy",
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 17,
                    fontWeight: FontWeight.w700,
                    fontFamily: 'Roboto',
                  )),
            ),
          )
        ],
      ),
    ),
  );
 }
}

然而，这并没有给你想要的外观。为了实现您的目标间距，使用 Row 的 mainAxisAlignment 属性有一个更简单的解决方案

child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,

推荐阅读