显示基于兄弟最大宽度的小部件

Question

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

我的文本条目包含在带有颜色的容器中，我想将它们与容器对齐，以便可以使用直边框进行渲染。

我如何在Flutter中指导这个？

Answer 1

这是IntrinsicWidth的一个很好的用例。您可以将其与CrossAxisAlignment.stretch一起使用，以确定子项的内在宽度，并使用它来设置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!!!!!!!'),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}