如何在Flutter行/列中重现CSS flex-grow空间分布行为?

时间:2019-03-16 14:55:44

标签: css flutter flexbox flutter-layout flex-grow

我有一个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)))
    ]));

enter image description here

如您所见,蓝色容器中的文本被剪切

使用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>

enter image description here

在这种情况下,绿色容器将其未使用的空间留给蓝色容器,并且蓝色容器中的文本不会被剪切掉。

我应该如何在Flutter中实现CSS flex-box的行为?

1 个答案:

答案 0 :(得分:0)

如果我了解您的权利,那么您想重建CSS行为。您可以只保留Expanded小部件。这是一个简短的独立示例:

Flex Grow Demo

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'),
                ),
              ],
            ),
          ),
        ),
      )
    );
  }
}