如何修改边框的外观

原创于 2024-09-16 22:15:00 发布 · 520 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#移动开发Flutter

一起Talk Flutter吧专栏收录该内容

961 篇文章

订阅专栏

文章目录

1. 概念介绍
2. 使用方法
3. 示例代码

我们在上一章回中介绍了DrawerHeader Widget相关的内容,本章回中将介绍BoxDecoration Widget.闲话休提，让我们一起Talk Flutter吧。

在这里插入图片描述

1. 概念介绍

我们在这里介绍的BoxDecoration Widget是一种修饰类组件，它不能单独使用，需要赋值给其它组件的decoration属性才有效果，赋值后会在其它组件外层嵌套一
个边框，名字中Box来源于此。我们可以修改边框的颜色，形状，线条进而达到装饰的效果。其实，我们在上一章回中创建用户头像时使用过它，只是没有详细介绍而已，
本章回中将详细介绍它的使用方法。

2. 使用方法

和其它的Widget一样，BoxDecoration Widget提供了相关的属性来控制自己，下面是常用的属性：

color属性：用来控制边框中间的填充颜色；
border属性：用来添加边框,可以只添加部分，或者添加全部，可以修改边框的粗细，颜色;
borderRadius属性：用来给边框添加圆角；
shape属性：用来控制边框的形状，比如圆形或者矩形；
boxShadow属性：用来给装饰框添加阴影效果,可以添加多个阴影;
这些属性都是可选属性，我们可以依据项目需求来使用相关的属性，最常用的是修改圆角，比如把该属性用来修饰Button组件，就可以实现圆角按钮。

3. 示例代码

BoxDecoration(
  color: Colors.greenAccent,
  //添加边框,可以只添加部分，或者全添加
  border: Border(
    top: BorderSide(
        color: Colors.red, width: 5, style: BorderStyle.solid),
    bottom: BorderSide(color: Colors.yellow, width: 5),
  ),
  // border: Border.all(
  //   color: Colors.yellow,
  //   width: 3,
  // ),

  //设置圆角边框,角度超过35就变成了圆形
  // borderRadius: BorderRadius.circular(20),
  //上面是所有边框都设置圆角，也可能在某一侧设置圆角边框
  // borderRadius: BorderRadius.only(topRight: Radius.circular(30)),

  //调整box的形状，形状是圆形时不能使用圆角属性，否则报错
  shape: BoxShape.rectangle,
  // shape: BoxShape.circle,

  //给Box添加阴影,可以添加多个阴影
  boxShadow: [
    BoxShadow(
      //阴影偏移距离，第一个是x，第二个是y
      offset: Offset(30, 20),
      color: Colors.purpleAccent,
      //值越小越模糊
      blurRadius: 10,
      //模糊范围
      spreadRadius: 2,
    )
  ],
),