颤振，如何使列中的宽度适合第一个孩子答案

【问题标题】：Flutter, How to fit width in Column to first child颤振，如何使列中的宽度适合第一个孩子
【发布时间】：2021-12-03 07:14:59
【问题描述】：

这是我的代码。

 ConstrainedBox(
      constraints: BoxConstraints(
          maxHeight: MediaQuery.of(context).size.height * 0.5),
      child: (message.caption != null)
          ?  Column(
                children: [
                  Flexible(
                    child: ImageLoader(message: message, controller: _),
                  ),
                   Container(
                    child: Padding(
                      padding: const EdgeInsets.only(top: 8.0),
                      child: BubbleText(
                          message: message,
                          fromCaption: true,
                          account: account),
                    ),
                  ),
                ],
              
          )
          : ...

这是我的专栏有 2 个孩子时的样子

这是我想要的样子

【问题讨论】：

给他们填充，或者你也可以使用扩展的小部件来实现这一点

标签： flutter flutter-layout containers

【解决方案1】：

如果你想动态宽度，你必须使用 statefull 小部件，因为你已经存储了第一个子宽度。所以下面的代码将适用于您的情况

class Challenge extends StatefulWidget {
  const Challenge({Key? key}) : super(key: key);

  @override
  _ChallengeState createState() => _ChallengeState();
}

class _ChallengeState extends State<Challenge> {
  final GlobalKey _firstChildKey = GlobalKey();
  double? childWidth;

  @override
  void initState() {
    WidgetsBinding.instance.addPostFrameCallback((_) {
      final RenderBox renderBoxRed = _firstChildKey.currentContext.findRenderObject();
      final size = renderBoxRed.size;
      setState(() {
        childWidth = size.width;
      });
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;
    return ConstrainedBox(
        constraints: BoxConstraints(maxHeight: size.height * 0.5, maxWidth: childWidth ?? size.width * .2),
        child: Column(
          children: [
            Flexible(
              key: _firstChildKey,
              child: ImageLoader(message: message, controller: _),
            ),
            Container(
              child: Padding(
                padding: const EdgeInsets.only(top: 8.0),
                child: BubbleText(message: message, fromCaption: true, account: account),
              ),
            ),
          ],
        ));
  }
}

【讨论】：

我是第一次问问题，你的回答非常正确而且超级快，非常感谢。

【解决方案2】：

这真的让我感到惊讶，这种需求出现的频率有多高，而且还没有人为此写过一个包。

所以我做了：https://pub.dev/packages/flex_with_main_child

它看起来像这样：

ColumnWithMainChild(
  mainChild: Flexible(
    child: ImageLoader(message: message, controller: _),
  ),
  childrenBelow: [
    Container(
      child: Padding(
        padding: const EdgeInsets.only(top: 8.0),
        child: BubbleText(
            message: message,
            fromCaption: true,
            account: account),
      ),
    ),
  ],
)

【讨论】：

你太棒了，谢谢！！