Flutter - 当添加边框半径边框消失

Posted 2023-02-24

【中文标题】Flutter - 当添加边框半径边框消失

【英文标题】：Flutter - When add border radius border disappear

【发布时间】：2020-01-21 12:47:05

【问题描述】：

我是 Flutter 的新手，我正在尝试制作一个动态图标按钮。 为此，我添加了以下装饰

      Container(
        margin: const EdgeInsets.only(left: 45.0),
        width: 150,
        height: 50,
        decoration: BoxDecoration(
          border: Border(
            top: BorderSide(width: 2.0, color: AppColors.primaryColor),
            bottom: BorderSide(width: 2.0, color: AppColors.primaryColor),
            right: BorderSide(width: 2.0, color: AppColors.primaryColor)
          ),
          borderRadius: BorderRadius.only(
                  topRight: Radius.circular(12.0)),
        ),
        child: Center(
          child: Text(
            this.iconText,
            style: TextStyle(color: AppColors.primaryTextColor),
          ),
        ),
      ),

但是当我添加这个'borderRadius'边框消失并且当我评论'borderRadius'边框出现时。我能知道其中的原因吗？以及如何在没有边框消失的情况下使用borderRadius

【问题讨论】：

你到底想做什么？

我想给容器添加一个带边框半径的边框

问题不在于borderRadius，你需要完成所有边的边框，否则它不起作用

是的，当我在所有边添加边框时它正在工作。但实际上我只想要三个边的边框，我不希望出现左侧边框。我该怎么办？

【参考方案1】：

你必须从四面八方添加边框

  Container(
        margin: const EdgeInsets.only(left: 45.0),
        width: 150,
        height: 50,
        decoration: BoxDecoration(
          border: Border(
            top: BorderSide(width: 2.0, color: AppColors.primaryColor),
            bottom: BorderSide(width: 2.0, color: AppColors.primaryColor),
            right: BorderSide(width: 2.0, color: AppColors.primaryColor),
             left: BorderSide(width: 2.0, color: AppColors.primaryColor)
          ),
          borderRadius: BorderRadius.only(
                  topRight: Radius.circular(12.0)),
        ),
        child: Center(
          child: Text(
            this.iconText,
            style: TextStyle(color: AppColors.primaryTextColor),
          ),
        ),
      ),

或者这个

Container(
            margin: const EdgeInsets.only(left: 45.0),
            width: 150,
            height: 50,
            decoration: BoxDecoration(
              border: Border.all(width: 2.0, color: Theme.of(context).primaryColor),
              borderRadius: BorderRadius.only(
                  topRight: Radius.circular(12.0)),
            ),
            child: Center(
              child: Text(
                this.iconText,
                style: TextStyle(color: AppColors.primaryTextColor), //Whatever color you want 
              ),
            ),
          ),

【讨论】：

谢谢，是的，当我在所有边上添加边框时它正在工作。但实际上我只想要三个边的边框，我不希望出现左侧边框。我该怎么办？

@Rukshan 你试过去掉左边的宽度吗

哦，谢谢，它适用于删除左侧宽度，我以前没有尝试过，我只删除了 left: BorderSide..

@Rukshan 很高兴为您提供帮助:)