Flutter的灵活行为

Question

我希望蓝色充满。但它只会扩散到一半。

https://i.stack.imgur.com/UQsiB.png

class TestScene extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          Flexible(
            fit: FlexFit.loose,
            child: Container(
              color: Colors.red,
              child: const Text('1'),
            ),
          ),
          Flexible(
            fit: FlexFit.loose,
            child: Container(
              color: Colors.blue,
              child: const Text('1234567890123456789012345678901234567890'),
            ),
          ),
        ],
      ),
    );
  }
}

相反也会失败。https://i.stack.imgur.com/rf00I.png

在两种情况下都很好。https://i.stack.imgur.com/21ORb.png

Answer 1

用Expanded包裹您要填充空格的那一个。如果您希望红色和蓝色都填充行，请用Expanded包裹它们，并使用flex属性给它们自己的比率

class TestScene extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Row(
        children: <Widget>[
          Container(
              color: Colors.red,
              child: const Text('1'),
            ),
          Expanded(
            child: Container(
              color: Colors.blue,
              child: const Text('1234567890123456789012345678901234567890'),
            ),
          ),
        ],
      ),
    );
  }
}

Answer 2

这是一种方法！ （要占用剩余空间）

String one='1',two='1234567890123456789012345678901234567890';


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      backgroundColor:Colors.white,
      body: Row(
        mainAxisSize:MainAxisSize.max,
        children: <Widget>[
          one.length>=two.length ?
          Expanded(
            child: Container(
              color: Colors.red,
              child: Text(one),
            ),
          ):Container(
              color: Colors.red,
              child: Text(one),
            ),
          two.length>=one.length ?
          Expanded(
            child: Container(
              color: Colors.blue,
              child: Text(two),
            ),
          ):Container(
              color: Colors.blue,
              child: Text(two),
            ),
        ],
      ),
    );
  }

或者要保持颜色大小相等，只需在两个小部件中使用Expanded