Question

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

      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

Answer 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 
              ),
            ),
          ),

颤振-当添加边框半径时边框消失

1 个答案: