颤振让孩子在列内匹配另一个孩子的宽度

Posted 2023-02-23

【中文标题】颤振让孩子在列内匹配另一个孩子的宽度

【英文标题】：Flutter have child match another child's width inside of Column

【发布时间】：2020-02-16 12:24:34

【问题描述】：

我正在尝试创建一个“事件”小部件，它由排列在一列中的两个文本小部件组成。事件小部件的宽度由第一个文本小部件（标题）确定。第二个文本（详细信息）应受标题宽度的限制并换行到下一行。这就是我想要的：https://i.imgur.com/Tksx9ZG.png

我已经尝试过这种布局，但是列的宽度设置为详细文本的宽度（最大的孩子）

Column(
  mainAxisAlignment: MainAxisAlignment.start,
  children: [
    Text("Title"),
    Text("Some longer text that should wrap")
  ]
)

【问题讨论】：

你试过用容器包裹它吗，比如：***.com/a/51931091/884522？

我有，但是如果我不设置容器的宽度，它将扩展以适合详细文本（而不是强制它换行到下一行）。为了设置容器的宽度，我需要知道标题文本在构建时的宽度。

final RenderBox box = context.findRenderObject(); then box.size 可能会满足您的需求，但可能不是正确的方式。

【参考方案1】：

解决方案完整代码：

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget 
  const MyApp(Key? key) : super(key: key);

  @override
  Widget build(BuildContext context) 
    return const MaterialApp(
      title: 'Flutter Demo',
      home: MyHomePage(),
    );
  


class MyHomePage extends StatefulWidget 
  const MyHomePage(Key? key) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();


class _MyHomePageState extends State<MyHomePage> 
  final GlobalKey _globalKey = GlobalKey();
  double? titleWidth;

  @override
  void initState() 
    super.initState();
    WidgetsBinding.instance?.addPostFrameCallback((_) 
      RenderBox renderBox =
          _globalKey.currentContext?.findRenderObject() as RenderBox;
      setState(() 
        titleWidth = renderBox.size.width;
      );
    );
  

  @override
  Widget build(BuildContext context) 
    return Scaffold(
      body: Center(
        child: ConstrainedBox(
          constraints: titleWidth == null
              ? const BoxConstraints()
              : BoxConstraints(
                  maxWidth: titleWidth!,
                ),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              Text(
                "Your Title Here",
                key: _globalKey,
                style: const TextStyle(color: Colors.red),
              ),
              const Text("Some longer text that should wrap")
            ],
          ),
        ),
      ),
    );
  

结果：

【参考方案2】：

所以我知道我在这个问题上迟到了。但我和你有同样的问题。在四处搜索之后，我很惊讶还没有人写过关于这个的包。

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

它看起来像这样：

ColumnWithMainChild(
  mainAxisAlignment: MainAxisAlignment.start,
  mainChild: Text("Title"),
  childrenBelow: [
    Text("Some longer text that should wrap"),
  ]
)