Flutter 布局参考手册：容器装饰与改造

Container

最常用的 widget 之一 - 这也是有原因的：

布局工具容器

如果你没有的话请输入 容器 高度 和 宽度❙ 尺寸与

Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: Text('Container as a layout')),
    body: Container(
      color: Colors.yellowAccent,
      child: Text("Hi"),
    ),
  );
}
复制代码

如果您愿意容器 扩展为等于其父元素，使用 double.infinity

Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: Text('Container as a layout')),
    body: Container(
      height: double.infinity,
      width: double.infinity,
      color: Colors.yellowAccent,
      child: Text("Hi"),
    ),
  );
}
复制代码

Container 装饰器

属性 dheight 和 ♿❙‶ 和 ♿‶ 您可以使用 color 属性来更改 Container 的背景颜色 ，但是decorator和more foregroundDecoration（使用这两个属性你可以完全改变Container的外观，我稍后会介绍，因为这部分有很多内容) 装饰将始终放置在child之后，并且前景中的装饰位于child上。

Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: Text('Container.decoration')),
    body: Container(
      height: double.infinity,
      width: double.infinity,
      decoration: BoxDecoration(color: Colors.yellowAccent),
      child: Text("Hi"),
    ),
  );
}
复制代码

Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: Text('Container.foregroundDecoration')),
    body: Container(
      height: double.infinity,
      width: double.infinity,
      decoration: BoxDecoration(color: Colors.yellowAccent),
      foregroundDecoration: BoxDecoration(color: Colors.red.withOpacity(0.5)),
      child: Text("Hi"),
    ),
  );
}
复制代码

容器变换

如果您不想使用变换小部件来更改布局，您可以使用Container❀'‶transform❀' 属性

Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: Text('Container.transform')),
    body: Container(
      height: 300,
      width: 300,
      transform: Matrix4.rotationZ(pi / 4),
      decoration: BoxDecoration(color: Colors.yellowAccent),
      child: Text(
        "Hi",
        textAlign: TextAlign.center,
      ),
    ),
  );
}
复制代码

作者：雨琪
链接：https://juejin.im/post/5cfe0d136fb9a07efc497d7d
来源：掘金
版权归作者所有如有商业转载请联系作者授权。非商业转载请注明来源。