Flutter ListView里面的 Container 自适应宽度

Container(
            margin: EdgeInsets.only(left: 8, top: 8, right: 3, bottom: 10),
            constraints: BoxConstraints(
              maxHeight: 28 * 4,
            ),
            child: ListView.builder( 
                itemCount: 4, 
                itemBuilder: (context, index) {
                  return itemWidget(context, index);
                }
            ),
          ),

因为我做的是跑马灯样式的, 截图略有问题
请添加图片描述

Container 如果里面只是单纯文字(文字展示的话自己再调吧,我没细致调整)

Widget itemWidget(BuildContext context, int index) {
    double cardWidth = (MediaQuery.of(context).size.width - 44)/2 - 11;  
  return Row(
    mainAxisSize: MainAxisSize.min,
    children: [
      Container(
          height: 20,
          constraints: BoxConstraints(
            maxWidth: cardWidth,
          ),
          margin: EdgeInsets.only(top: 8),
          decoration: BoxDecoration(
            color: Color(0x66ffffff),
            border: Border.all(width: 0.5, color: Color(0x66FF0808)),
            borderRadius: BorderRadius.all(Radius.circular(10)),
          ), 
                 child: Expanded(
                  child: Text(
                     (index%2==0) ? ''语言攻击$index'' : '刘朋反馈,财经后台,应用中心后台,应朋反馈,财经后台,应用中心后台,应朋反馈,财经后台,应用中心后台,应用中心-小$index',
                    style: TextStyle(
                      color: Color(0xFF560303),
                      fontSize: 8,
                      fontWeight: FontWeight.w400,
                    ),
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                  ),
              ), 
        ),
    ],
  );
  }

如果图文的话(我这只用到这里)Text 文字外包了一层Container,要不然没法自适应宽度
请添加图片描述

Widget itemWidget(BuildContext context, int index) {
    double cardWidth = (MediaQuery.of(context).size.width - 44)/2 - 11; 

  return Row(
    mainAxisSize: MainAxisSize.min,
    children: [
      Container(
          height: 20,
          constraints: BoxConstraints(
            maxWidth: cardWidth,
          ),
          margin: EdgeInsets.only(top: 8),
          decoration: BoxDecoration(
            color: Color(0x66ffffff),
            border: Border.all(width: 0.5, color: Color(0x66FF0808)),
            borderRadius: BorderRadius.all(Radius.circular(10)),
          ),
          child: Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              Card(
                margin: EdgeInsets.only(left: 2, top: 2, bottom: 2, right: 6),
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadiusDirectional.circular(8),
                ),
                clipBehavior: Clip.antiAlias,
                  child: Image.network(
                    'https://imgm.gmw.cn/attachement/jpg/site215/20210812/8692573091945953206.jpg',
                    fit: BoxFit.fill,
                    width: 16,
                    height: 16,
                  )
              ),
               Container( 
                 margin: EdgeInsets.only(right: 4),
                 constraints: BoxConstraints(
                   maxWidth: cardWidth - 30,
                 ), 
                  child: Text(
                    (index%2==0) ? ''语言攻击$index'' : '刘朋反馈,财经后台,应用中心后台,应朋反馈,财经后台,应用中心后台,应朋反馈,财经后台,应用中心后台,应用中心-小$index',
                    style: TextStyle(
                      color: Color(0xFF560303),
                      fontSize: 8,
                      fontWeight: FontWeight.w400,
                    ),
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                  ), 
               ),
            ],
          ),
        ),
    ],
  );
  }

此文章仅做学习记录使用,如有不足之处请各位大神指出,谢谢

猜你喜欢

转载自blog.csdn.net/u014651417/article/details/119650069#comments_20320578