使分隔器匹配收缩包装容器的宽度？答案

【问题标题】：Make Divider match width of shrink-wrapped container?使分隔器匹配收缩包装容器的宽度？
【发布时间】：2020-05-20 22:44:00
【问题描述】：

我想构建一个包含两个Text 小部件和一个Divider 小部件的小部件，垂直堆叠。 Divider 的宽度应与两个 Text 小部件中较宽的宽度相同。整个组合的小部件不应占用比其可见元素更多的布局空间；也就是说，它应该是收缩包装的。

我希望它看起来像下图：

（我在这里添加了浅灰色背景只是为了让我想要的边界框更明显。）

我不清楚如何同时强制小部件层次结构假定文本的自然最大宽度，同时导致Divider 拉伸到仅与文本宽度一样大的宽度。如果可能的话，我想在不编写任何自定义布局小部件的情况下执行此操作，并且不使用在第一个布局或渲染通道之后使用小部件的测量值直接为 Divider 分配宽度。

这是我在 DartPad (https://dartpad.dev/flutter) 中尝试过的一些代码，但自然没有达到预期的效果：

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: Column(mainAxisSize: MainAxisSize.min, children: <Widget>[
        Text("Lorem ipsum"),
        Text("dolor"),
        Divider(thickness: 1.0, color: Colors.red),
      ]),
    )));
  }
}

我的最终目标是编写适用于 Android Studio 3.5.3、Windows 10 64 位的代码。如何修复（或替换）我的代码来完成此操作？

【问题讨论】：

标签： flutter dart flutter-layout

【解决方案1】：

使用 IntrinsicWidth 请参阅https://medium.com/flutter-community/flutter-layout-cheat-sheet-5363348d037e 了解详细选项

https://dartpad.dev/79edda902aa584124dafd56c35d612fd

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: IntrinsicWidth(
        child:Column(mainAxisSize: MainAxisSize.min , children: <Widget>[
        Text("Lorem ipsum"),
        Text("dolor"),
        Divider(thickness: 1.0, color: Colors.red),
      ]))),
    ));
  }
}

【讨论】：