flutter - 带有扩展/灵活小部件的行，看起来不像预期的那样

Question

我有一个有点错误的 UI 设计。它看起来像这样（为了更好地理解，我禁用了填充）：

它是由一个包含 Flexible 的 Row 组合在一起的，而不是在一行中包含所有文本，而在另一行中展开的文本应该完全填充父行。这仅在柔性未激活时有效。我怎样才能解决这个问题，以便该行的右侧部分完全用米色着色？

小部件的代码：

包含行：

class TestRow extends StatelessWidget {
  //TestRow Displays a title and a text in a row to fit the apps UI style
  final double width;
  final String title;
  final String text;
  final String font;

  TestRow({
    this.width,
    this.title,
    this.text,
    this.font
  });

  final cell = (Widget widget) => Padding(
      padding: EdgeInsets.only(left: 15, top: 5, bottom: 5, right: 15),
      child: widget,
    );
  
  @override
  Widget build(BuildContext context) {
    return cell(Container(
      decoration: BoxDecoration(
        color: testlightGreen,
        borderRadius: BorderRadius.all(Radius.circular(10))
      ),
      child: Row(
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          TestTitleDetails(text: title, width: width,),
          TestTextDetails(text: text)
        ],
      ),
    ));
  }
}

行的左边部分：

class TestTitleDetails extends StatelessWidget {
  final String text;
  final String font;
  final double width;

  TestTitleDetails({
    this.text,
    this.font,
    this.width
  });

  final cell = (Widget widget) => Padding(
      //padding: EdgeInsets.only(left: 15, top: 5, bottom: 5, right: 15),
      child: widget,
    );
  
  @override
  Widget build(BuildContext context) {
    return Flexible(
      child:Stack(
        children: <Widget>[Container(
          width: width ?? 100 ,
          //padding: EdgeInsets.all(5),
          child: Text(text,textAlign: TextAlign.center, style: TextStyle(color: Colors.white)))
        ],
      )
    );
  }
}

行的右侧部分：

class TestTextDetails extends StatelessWidget {
  final String text;
  final String font;

  TestTextDetails({
    this.text,
    this.font
  });

  final cell = (Widget widget) => Padding(
      //padding: EdgeInsets.only(left: 15),
      child: widget,
    );
  
  @override
  Widget build(BuildContext context) {
    return  Expanded(
      child: Container(
        decoration: BoxDecoration(
          color: testBeige,
          borderRadius: BorderRadius.horizontal(right:Radius.circular(10))
      ),
        //padding: EdgeInsets.all(10),
        child: Text(text),
      ));
  }
}

编辑：我想我需要根据左侧给出的 flex 值手动设置右侧容器的高度和宽度（没有展开）。我通过测试发现 42 的大小适合左侧的 2 行。我现在正在寻找一个函数，它可以让我确定左侧何时有 2 条线以使右侧更高

标签： flutterflutter-layout