如何在Flutter中使小部件的大小与另一个小部件的大小相同 [英] How to make a widget's size same as another widget in Flutter

问题描述

右侧文本的长度不固定.我想使左边的线的高度与文本区域的高度相同.

The length of the texts on right is not fixed. I want to make the height of the line on left same as the texts area height.

是否可以将小部件与其他小部件(如Android的Flutter中的RelativeLayout或ConstraintLayout)对齐?

Is there a way to align a widget to another widget like Android's RelativeLayout or ConstraintLayout in Flutter?

我的代码:

Container(
      padding: EdgeInsets.fromLTRB(100, 0, 100, 0),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Container(
            color: Color(0xFFEEEEEE),
            width: 4,
            height: 80,
            margin: EdgeInsets.only(right: 10),
          ),
          Expanded(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Text(
                  _content,
                  style: Theme.of(context).textTheme.headline4,
                ),
              ],
            ),
          )
        ],
      ),
    );

推荐答案

将行包装为 IntrinsicHeight 并摆脱height属性

Wrap your row into IntrinsicHeight and get rid of the height property

              IntrinsicHeight(
                child: Row(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Container(
                      color: Color(0xFFEEEEEE),
                      width: 4,
                      margin: EdgeInsets.only(right: 10),
                    ),
                    Expanded(
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.start,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: <Widget>[
                          Text(
                            'a loong loong text with a lot of letters and characters',
                            style: Theme.of(context).textTheme.headline4,
                          ),
                        ],
                      ),
                    )
                  ],
                ),
              ),

这篇关于如何在Flutter中使小部件的大小与另一个小部件的大小相同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！