Flutter中如何让Container宽高适配子组件？含ListView.builder场景

ListView.builder的item会默认强制子组件占满水平方向的最大宽度，导致你的Container自动撑满。要让Container宽度跟随文本内容自适应，只需用Align组件包裹Container即可：

修改后的CustomContainer代码：

class CustomContainer extends StatelessWidget {
  const CustomContainer({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Align(
      alignment: Alignment.centerLeft, // 可根据需求调整对齐位置，比如center、right
      child: Container(
        decoration: BoxDecoration(
          color: Colors.blue,
          borderRadius: BorderRadius.circular(20)
        ),
        padding: EdgeInsets.all(20),
        child: Text('I am demo Text',style: TextStyle(fontWeight: FontWeight.w500,fontSize: 20,color: Colors.white),),
      ),
    );
  }
}

原理说明 #

Align组件会打破ListView的满宽约束，让子组件（Container）按照自身的固有尺寸（即文本宽度加上padding的总和）来布局，从而实现宽度自适应文本内容的效果。你也可以根据需求调整alignment参数，控制Container在ListView item中的水平位置。

内容的提问来源于stack exchange，提问作者Irfan Ganatra