如何在 Flutter 行/列中重現 CSS flex-grow 空間分布行為？

Question

我有一個看起來像這樣的Row ：

SizedBox(
    height: 64,
    child: Row(crossAxisAlignment: CrossAxisAlignment.stretch, children: [
        Expanded(
            child: Container(
            color: Colors.blue,
            child: Text("looooooooong", softWrap: false))),
        Expanded(
            child: Container(
            color: Colors.green, child: Text("short", softWrap: false)))
    ]));

正如您所看到的，藍色容器中的文本被剪切掉了。

使用 CSS 構建相同的東西看起來像這樣：

 #container { width: 100px; height: 64px; display: flex; align-items: stretch; } #first { flex-grow: 1; background-color: blue; } #second { flex-grow: 1; background-color: green; }

 <div id="container"> <div id="first">looooooooong</div> <div id="second">short</div> </div>

在這種情況下，綠色容器將未使用的空間留給藍色容器，藍色容器中的文本不會被刪除。

我應該如何在 Flutter 中實現 CSS flex-box 行為？

Answer 1

如果我理解你的權利，你想重建CSS行為。 您可以省略擴展的小部件。 這是一個簡短的獨立示例：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: SizedBox(
            height: 64,
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: <Widget>[
                Container(
                  color: Colors.blue,
                  child: Text('loooooooooooong'),
                ),
                Container(
                  color: Colors.green,
                  child: Text('short'),
                ),
              ],
            ),
          ),
        ),
      )
    );
  }
}

Answer 2

帶有 Flex 的擴展小部件可以為您工作：

import 'package:flutter/material.dart';
    
    void main() {
      return runApp(
        MaterialApp(
          home: Scaffold(
            body: Column(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                SizedBox(
                  height: 64.0,
                  child: Row(
                    crossAxisAlignment: CrossAxisAlignment.stretch,
                    children: [
                      Expanded(
                        flex: 8,
                        child: Container(
                          color: Colors.blue,
                          child: const Text('loooooooooooong'),
                        ),
                      ),
                      Expanded(
                        flex: 2,
                        child: Container(
                          color: Colors.green,
                          child: const Text('short'),
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
      );
    }