开发文档
Flutter
Container样式

Container样式

颜色 

return Container{
  // 红色
  color: Colors.red,
  // 或者自定义RGB色彩
  // color: Color.fromARGB(255, 123, 123, 123),
};

注意不能这样使用：

return Container{
  color: Colors.red,
  decoration: BoxDecoration{
    // 其它代码
  }
};

如果需要decoration，这样使用：

return Container{
  decoration: BoxDecoration{
    color: Colors.red,
    // 其它样式
  }
};

渐变色 

retrun Container(
  decoration: BoxDecoration{
    gradient: LinearGradient(
      // 开始的位置
      begin: Alignment.topLeft,
      // 结束为止
      end: Alignment.bottomRight,
      // 关键点
      stops: [0.0, 1.0],
      // 颜色
      colors: [Colors.red, Color.fromARGB(255, 255, 154, 147)]
    )
    // 其它代码
  }
)

注意，颜色的数量和关键点的数量要相同，即stops.length == colors.length

阴影 

return Container(
  decoration: BoxDecoration{
    boxShadow: [
      BoxShadow(
        // 颜色
        color: Colors.grey.withOpacity(0.1),
        // 阴影半径
        spreadRadius: 1,
        // 模糊半径
        blurRadius: 5,
      ),
    ]
  }
);

圆角 

return Container(
  decoration: BoxDecoration{
    // 圆角10
    borderRadius: BorderRadius.circular(10),
  }
);

边框 

return Container(
  decoration: BoxDecoration{
    // 全部的边框红色，宽度为1
    border: Border.all(
      color: Colors.red,
      width: 1.0,
    ),
  }
);

也可以这样使用：

Container(
  border: Border(
    // 顶部边框
    top: BorderSide(
      color: Colors.red,
      width: 1.0,
    ),
    // 底部边框
    bottom: BorderSide(
      color: Colors.blue,
      width: 1.0,
    ),
  ),
);

包含一个图片的Container 

return Container(
  decoration: BoxDecoration(
    image: DecorationImage(
      image: const AssetImage("assets/image.jpg")
    )
  )
);

需要过渡动画的Container

可以使用AnimatedContainer代替Container实现有过渡动画的Container

例如颜色的过渡变化


// 将Color作为属性传入AnimatedContainer
Color containerColor=Colors.red;

return AnimatedContainer(
  // 注意，必要的属性Duration，标识变换过渡时间
  duration: const Duration(milliseconds: 200)
  width: 100,
  height: 100,
  color: containerColor,
);

这样当修改containerColor这个变量的时候，Container就可以实现颜色过渡效果

点击水波纹效果 

// 注意，外层不要使用纯色的内容
return Ink(
  decoration: BoxDecoration(
    color: /** 背景颜色（如果需要） */,
    borderRadius: /** 圆角（如果需要） */,
  ),
  child: InkWell(
    onTap: (){
      // 点击操作
    },
    child: Container(
      // 注意，Container的样式在Ink的decoration中
      height: /** 高度（如果需要） */,
      width: /** 宽度（如果需要） */,
      child: // Container内容
    )
  )
);
自定义TextFieldText样式