layout - 基于同级最大宽度显示小部件

Question

我有一个列，它包含许多不同大小的文本条目，我想让它们扩展到与最大文本相同的宽度。

我的文本条目被包裹在一个带有颜色的容器中，我想将它们全部与容器对齐，以便它可以用直线边框呈现。

我如何在 Flutter 中指示它？

Answer 1

这是 IntrinsicWidth 的一个很好的用例.您可以将它与 CrossAxisAlignment.stretch 一起使用确定 child 的内在宽度并用它来设置你的宽度 Column :

这是生成上述图像的示例代码。

import 'package:flutter/material.dart';

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      home: new Material(
        child: new Center(
          child: new IntrinsicWidth(
            child: new Column(
              mainAxisSize: MainAxisSize.min,
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                new Container(
                  decoration: new BoxDecoration(color: Colors.blue[200]),
                  child: new Text('Hello'),
                ),
                new Container(
                  decoration: new BoxDecoration(color: Colors.green[200]),
                  child: new Text('world!!!!!!!'),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}