Flutter 背景剧中显示,两层背景文字剧中显示

最新推荐文章于 2024-11-26 20:25:36 发布

曾经也是个少年

最新推荐文章于 2024-11-26 20:25:36 发布

阅读量284

点赞数 1

分类专栏： flutter 文章标签： flutter web app ios android xcode

本文链接：https://blog.youkuaiyun.com/qq_26836029/article/details/107690860

版权

flutter 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了如何在Flutter应用中实现背景图像平铺填充，并让两层文字分别在背景上居中显示。内容涵盖了Flutter的布局技巧，包括使用Stack、Positioned和Alignment等 widget 实现复杂的界面布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Container(
       margin: EdgeInsets.symmetric(horizontal: 30),
       decoration: BoxDecoration(
         image: DecorationImage(
           image: ImageUtil.getAssetImage('mall/mall_bg_timebg@3x',),
           fit: BoxFit.fill,
         ),
       ),
       child: Container(
         height: 65,
         padding: EdgeInsets.symmetric(vertical: 9),
         child: Column(
           children: <Widget>[
              Container(
               child: Text(
                 '${widget.entity.name}',
                 style: TextStyle(
                   color: Color(0XFF2B95E9),
                   fontSize: 14.0,
                   fontWeight: FontWeight.bold,
                 ),
                 // overflow: TextOverflow.ellipsis,
               ),
             ),
             Row(
               crossAxisAlignment: CrossAxisAlignment.center,
               mainAxisAlignment: MainAxisAlignment.center,
               children: <Widget>[
                 SizedBox(
                   width: 4.0,
                 ),
                 Container(
                   padding: EdgeInsets.all(2),
                   margin: EdgeInsets.symmetric(horizontal: 2),
                   decoration: BoxDecoration(
                     color: Color(0XFF2B95E9),
                     borderRadius: BorderRadius.all(Radius.circular(5.0)),
                   ),
                   child: Text('$hourString',
                       style: TextStyle(color: Colors.white, fontSize: 12)),
                 ),
                 Text(':',
                     style:
                         TextStyle(color: Color(0XFF2B95E9), fontSize: 16)),
                 Container(
                   padding: EdgeInsets.all(2),
                   margin: EdgeInsets.symmetric(horizontal: 2),
                   decoration: BoxDecoration(
                     color: Color(0XFF2B95E9),
                     borderRadius: BorderRadius.all(Radius.circular(5.0)),
                   ),
                   child: Text('$minuteString',
                       style: TextStyle(color: Colors.white, fontSize: 12)),
                 ),
                 Text(':',
                     style:
                         TextStyle(color: Color(0XFF2B95E9), fontSize: 16)),
                 Container(
                   padding: EdgeInsets.all(2),
                   margin: EdgeInsets.symmetric(horizontal: 2),
                   decoration: BoxDecoration(
                     color: Color(0XFF2B95E9),
                     borderRadius:
                         new BorderRadius.all(new Radius.circular(5.0)),
                   ),
                   child: Text('$secondString',
                       style: TextStyle(color: Colors.white, fontSize: 12)),
                 ),
               ],
             )
           ],
         ),
         
       ),
     );

在这里插入图片描述