Flutter开发求助:消除文本线条并实现文本背景左右延伸
问题解决方案
问题1:移除文本上的线条
你给文本背景用了PaintingStyle.stroke描边模式,这会在文本边缘生成线条。把它改成PaintingStyle.fill填充模式就能解决:
background: Paint() ..color = Color(0xaa000000) ..strokeWidth = 17 ..style = PaintingStyle.fill, // 替换stroke为fill
问题2:实现文本背景水平延伸至末端
Text组件的background属性只能贴合文本自身宽度,没法延伸到容器末端。换个思路,把Text放到Container里,给Container设置背景色并让它撑满可用宽度:
修改后的完整代码
ClipRRect( borderRadius: BorderRadius.only( topLeft: Radius.circular(8.0), topRight: Radius.circular(8.0), ), child: Container( height: 100, width: double.infinity, decoration: BoxDecoration( borderRadius: BorderRadius.only( topLeft: Radius.circular(8.0), topRight: Radius.circular(8.0), ), image: DecorationImage( fit: BoxFit.cover, image: AssetImage('assets/images/dog.jpg'))), child: Padding( padding: const EdgeInsets.fromLTRB(50, 78, 0, 0), // 用Container包裹Text实现背景延伸 child: Container( width: double.infinity, padding: EdgeInsets.symmetric(vertical: 4), // 控制背景上下高度 color: Color(0xaa000000), child: Text( 'Title case', style: TextStyle(color: Colors.white), ), ), ), ), ),
内容的提问来源于stack exchange,提问作者user19924837
相关产品推荐
相关产品推荐

