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

Question

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

我的 Text 条目被包装在一个带有 Color 的容器中，我想将它们与容器对齐，这样它就可以用直线边框呈现。

我如何在 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!!!!!!!'),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}