flutter Container默认边框边线

jjjjjj_m

于 2024-02-29 10:18:33 发布

阅读量372

点赞数 8

分类专栏： flutter 文章标签： flutter 前端

本文链接：https://blog.csdn.net/weixin_43837123/article/details/136363452

版权

flutter 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

问题出现场景：

当我在画一个左右中的布局，中间是渐变的一个container，左右是图片的时候，左边出现有一条白色边线，导致不举不衔接；如下图

拼之前：

拼之后：可以很明显看到有一条边导致布局衔接不好

 return Row(
      children: [
        Image.asset(
          'lib/assets/images/scan/filename-left.png',
          width: 32.px,
          height: 32.px,
        ),
        Container(
            height: 32.px,
            padding: EdgeInsets.symmetric(horizontal: 20.px),
            alignment: Alignment.center,
            decoration: BoxDecoration(
                gradient: LinearGradient(
                    begin: Alignment.topLeft,
                    end: Alignment.bottomRight,
                    colors: [hexColor('#4EBAFF'), hexColor('#86DEFF')])),
            child: Text(
              '市场部采购需求单.pdf',
              style: BaseStyle.style16('#ffffff'),
            )),
        Image.asset('lib/assets/images/scan/filename-right.png',
            width: 32.px, height: 32.px)
      ],
    );

问题解决：

设置 container 的border的宽度 width为0 就可以完美解决

return Row(
      children: [
        Image.asset('lib/assets/images/scan/filename-left.png',width: 32.px,height: 32.px,),
        Container(
            height: 32.px,
            padding: EdgeInsets.symmetric(horizontal:20.px ),
            alignment: Alignment.center,
            decoration: BoxDecoration(
//这里设置border width 为0，颜色也设置成左边的颜色 可以完美衔接
                border: Border(
                    left: BorderSide(color: hexColor('#4EBAFF'), width: 0.0)),
                gradient: LinearGradient(
                    begin: Alignment.topLeft,
                    end: Alignment.bottomRight,
                    colors: [hexColor('#4EBAFF'), hexColor('#86DEFF')])),
            child: Text(
              '市场部采购需求单.pdf',
              style: BaseStyle.style16('#ffffff'),
            )),
        Image.asset('lib/assets/images/scan/filename-right.png',width: 32.px,height: 32.px)
      ],
    );

设置完之后的效果