Flutter - 常见、通用的属性

width

宽

height

高

alignment

子元素对齐方式。会让元素撑满父元素。

alignment: Alignment.topLeft
alignment: Alignment.topCenter
alignment: Alignment.topRight

alignment: Alignment.centerLeft
alignment: Alignment.center
alignment: Alignment.centerRight

alignment: Alignment.bottomLeft
alignment: Alignment.bottomCenter
alignment: Alignment.bottomRight

color

颜色

color: Color(0xFF000000)
color: Color.fromARGB(255, 0, 0, 0)
color: Color.fromRGBO(0, 0, 0, 1)
color: Colors.red
//MaterialColor是有个颜色map，可以选择不同色深的颜色，map中含有的色值才能正常展示
color: Colors.red[50]

margin

外边距

//上下左右均设置
margin: EdgeInsets.all(20)
//left-top-right-bottom
margin: EdgeInsets.fromLTRB(20, 20, 20, 20)
//单独设置单边
margin: EdgeInsets.only(left: 20,top: 20,right: 20,bottom: 20)
//设置上下或者左右
margin: EdgeInsets.symmetric(vertical: 20,horizontal: 20)

padding

内边距。也是使用EdgeInsets设置，同margin设置。

decoration

修饰，在child下面做背景展示
设置decoration，原控件color属性就要去除，设置在BoxDecoration。

//边框
        decoration: BoxDecoration(
          border: Border.all(
            color: Colors.black,
            width: 1,
          ),
        ),
//圆角
        decoration: BoxDecoration(
          color: Colors.red,
          borderRadius: BorderRadius.circular(10),
        ),
//背景图
        decoration: BoxDecoration(
            image: DecorationImage(
              image: NetworkImage('https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=336492172,12372647&fm=26&gp=0.jpg'),
              fit: BoxFit.cover,
            )
        ),
//背景色
        decoration: BoxDecoration(
            color: Colors.red
        ),
//形状
        decoration: BoxDecoration(
          color: Colors.red,
          shape: BoxShape.circle,
        ),
//阴影
        decoration: BoxDecoration(
          color: Colors.red,
          boxShadow:[
            BoxShadow(
              color: Colors.green,
              blurRadius: 5
            ),
          ]
        ),
//渐变色
          gradient: LinearGradient(
              begin: Alignment.topRight,
              end: Alignment.bottomLeft,
              // Add one stop for each color. Stops should increase from 0 to 1
              stops: [
                0.3,
                0.5,
                0.7,
                0.9
              ],
              colors: [
                Colors.red[50],
                Colors.red[100],
                Colors.red[200],
                Colors.red[300]
              ]),

foregroundDecoration

修饰，和decoration类似，在child上面做蒙版展示。

transform

设置平移旋转缩放之类。使用Matrix4

//缩放
transform: Matrix4.diagonal3Values(1, 2, 1),
//平移
transform: Matrix4.translationValues(10.0, 10.0, 10.0),
//旋转
import 'package:flutter/material.dart';
transform: Matrix4.rotationZ(pi / 6),

constaints

为child设置限制约束。

		//约束宽高
        constraints: BoxConstraints.expand(height: 100, width: 100),
        //约束最小最大宽高
        constraints: BoxConstraints(
          minHeight: 100,
          maxHeight: 200,
          minWidth: 100,
          maxWidth: 200,
        ),