Flutter-UI- 阴影(BoxShadow)、 间距(padding)、 Align

  • 关于阴影(BoxShadow)

 

代码:

    /*
    *  控件阴影demo
    * */
    Container BoxDecorationDemo() {
      return Container(
//        color: Colors.red,
      width: 200,
      height: 200,
      alignment: Alignment(0,0), //居中参数
      padding: EdgeInsets.all(20), // 子控件与 Container 内间距
      margin: EdgeInsets.all(10),// 四周间距10
      child: Icon(Icons.pages,size: 60,color: Colors.greenAccent,),
//        transform: Matrix4.rotationZ(50),
      decoration: BoxDecoration(
        color: Colors.red,
            border: Border.all(
              width: 8,
              color: Colors.greenAccent
            ),
        borderRadius: BorderRadius.circular(50), // 圆角
        boxShadow: [
          BoxShadow(color: Colors.grey,offset: Offset(10,10),spreadRadius: 5,blurRadius:20), //阴影   spreadRadius 延展   blurRadius 模糊
          BoxShadow(color: Colors.orange,offset: Offset(-10,10),spreadRadius: 5,blurRadius: 20)

        ]
      ),
      );
    }
  •  
  •   关于 padding:

 

 

    Column PaddingDemo() {
      return Column(
      children: <Widget>[
        Padding(
          padding: EdgeInsets.only(
            bottom: 20
          ),
          child: Text("hello  LMX",style: TextStyle(fontSize: 30,backgroundColor: Colors.red),),

        ),
        Text("hello  LMX",style: TextStyle(fontSize: 30,backgroundColor: Colors.red),),
        Text("hello  LMX",style: TextStyle(fontSize: 30,backgroundColor: Colors.red),),

      ],
    );
    }

 

  • 关于Align:

 

    /*
    * Align 练习
    * */
    Container AlignDemo() {
      return Container(
      width: 200,
      height: 200,
      color: Colors.greenAccent,
      child: Align(
          alignment: Alignment(0,0),
          widthFactor: 15,
          heightFactor: 15,
          child: Icon(Icons.pets,size: 70,),
      ),

    );
    }

 

 

 

 

©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页