没有固定宽度的Widget可以约束Text widget吗？

Question

Container(
   child: Row(
     children:[
       Container(  //icon in the left side
          height: 50,
          widget: 50,
          color: Colors.green,
          child: Icon...
       ),  
       Container( //container text
         //width:200, if I set this width
         child:Text('a long text inside here...',
           textAlign: TextAlign.justify,
         ),//long text here
       ), 
     ],

上面的代码只是解释我的问题的示例。 我在列中调用这个小部件。所以这一列限制了这个小部件的宽度。到目前为止，一切都很好。该小部件的高度在图标容器 (50) 中设置。这个“长”文本将适合该区域，因此不会太大，只是一个描述。例如，如果将图标容器中的高度设置为 80，将容器中的宽度设置为 280 就足够了。足以满足固定布局。

就像这张图片中一样：

问题在于长文本不受容器（文本）内部的限制。文本在一行中溢出了容器。如果我设置此容器的宽度，则文本可以正常工作，包括对齐。

固定布局没有问题，但我正在做响应式布局。所以这个小部件需要灵活地适应我的专栏。

我真的需要固定这个宽度还是我们可以做这个工作？ 谢谢你。

Answer 1

您可以使用 Expanded 小部件使文本容器占据行内的剩余宽度，同时允许文本换行并对齐

Container(
  child: Row(
    children: [
      Container(
        height: 50,
        width: 50,
        color: Colors.green,
        child: Icon(...),
      ),
      Expanded(
        child: Container(
          child: Text(
            'a long text inside here...',
            textAlign: TextAlign.justify,
          ),
        ),
      ),
    ],
  ),
)

Answer 2

不必设置容器的固定宽度

根据屏幕大小设置宽度即可

例如

final width = MediaQuery.of(context).size.width;

这将为您提供屏幕的宽度

现在使用这个

width

，您可以设置图像的宽度，如

width * 0.3

和容器文本的

width * 0.6

。

我认为这样你也可以在保持响应能力的同时给出约束。