iOS- Flutter 容器类组件-Padding&DecoratedBox

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 21 天，点击查看活动详情

Padding

Padding({
  ...
  EdgeInsetsGeometry padding,//抽象类，一般都使用EdgeInsets类，该类继承于EdgeInsetsGeometry，并且设置了一些便捷的方法
  Widget child,//必须实现的子Widget
})

EdgeInsets

这个iOS开发者应该很熟悉，用法和UIEdgeInsets类似，分别指四边的边距，不同的是里面的API有些不同

• fromLTRB：四边的填充方式
• all：所有方向都使用相同的数值填充
• only：仅某个方向填充
• symmentric：用于设置对称方向的填充，vertical指top和bottom，horizontal指left和right。

实例：

class PaddingTestRoute extends StatelessWidget {
  const PaddingTestRoute({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Padding(
      //上下左右各添加16像素补白
      padding: const EdgeInsets.all(16),
      child: Column(
        //显式指定对齐方式为左对齐，排除对齐干扰
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisSize: MainAxisSize.min,
        children: const <Widget>[
          Padding(
            //左边添加8像素补白
            padding: EdgeInsets.only(left: 8),
            child: Text("Hello world"),
          ),
          Padding(
            //上下各添加8像素补白
            padding: EdgeInsets.symmetric(vertical: 8),
            child: Text("I am Jack"),
          ),
          Padding(
            // 分别指定四个方向的补白
            padding: EdgeInsets.fromLTRB(20, 0, 20, 20),
            child: Text("Your friend"),
          )
        ],
      ),
    );
  }
}

DecoratedBox 装饰器

DecoratedBox可以在其子组件绘制前，绘制一些装饰，比如背景、边框、渐变等。

const DecoratedBox({
//代表将要绘制的装饰，类型为Decoration，是一个抽象类，定义了createBoxPainter(),子类的主要职责是需要通过实现它来创建一个画笔（类似drawRect），用于绘制装饰。
  Decoration decoration,
  //此属性决定在哪里绘制，有两个属性，一个是background：在子组件之后绘制，一个是foreground：在子组件之前绘制。也就是所谓的前景色和背景色
  DecorationPosition position = DecorationPosition.background,
  Widget? child
})

BoxDecoration

它是一个Decoration的子类，也就是用于实现装饰元素的绘制。

//属性
BoxDecoration({
  Color color, //颜色
  DecorationImage image,//图片
  BoxBorder border, //边框
  BorderRadiusGeometry borderRadius, //圆角
  List<BoxShadow> boxShadow, //阴影,可以指定多个
  Gradient gradient, //渐变
  BlendMode backgroundBlendMode, //背景混合模式
  BoxShape shape = BoxShape.rectangle, //形状
})
//实例

DecoratedBox(
   decoration: BoxDecoration(
     gradient: LinearGradient(colors:[Colors.red,Colors.orange.shade700]), //背景渐变
     borderRadius: BorderRadius.circular(3.0), //3像素圆角
     boxShadow: [ //阴影
       BoxShadow(
         color:Colors.black54,
         offset: Offset(2.0,2.0),
         blurRadius: 4.0
       )
     ]
   ),
  child: Padding(
    padding: EdgeInsets.symmetric(horizontal: 80.0, vertical: 18.0),
    child: Text("Login", style: TextStyle(color: Colors.white),),
  )
)

通过BoxDecoration我们实现了一个渐变按钮的外观，上面的例子中使用了LinearGradient类，它用于定义线性渐变的类，Flutter中还提供了其他渐变配置，比如：RadiaGradient、SweepGradient。