[Day3] Flutter - 改变容器风格 ( Container )

前言

Hi, 我是鱼板伯爵今天要教大家 Container 这个元件，教学内容只会撷取片段程序码，建议大家搭配完整程序码来练习。

完整程序码

Container 常用的属性

• child：可以设定一个子元件
• color：背景颜色
• width：宽
• height：高

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

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 100,
      height: 100,
      color: Colors.amber,
      child: Text("Hello"),
    );
  }
}

Alignment对齐方式

里面有各种对齐方式，像是Alignment.center(置中), Alignment.topCenter(上中),Alignment.bottomLeft(下左)...

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

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 100,
      height: 100,
      alignment: Alignment.center,
      color: Colors.amber,
      child: Text("Hello"),
    );
  }
}

Padding 内部间距

EdgeInsets.all()是四个的边内部距离，如果只要单边的话可以使用EdgeInsets.only(left: 10, right: 10)。

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

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 100,
      height: 100,
      color: Colors.amber,
      padding: EdgeInsets.all(30),
      child: Container(
        color: Colors.black,
      ),
    );
  }
}

Margin 外部间距

EdgeInsets.all()是四个的边内部距离，如果只要单边的话可以使用EdgeInsets.only(left: 10, right: 10)，跟Padding设置一样。

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

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 100,
      height: 100,
      color: Colors.amber,
      child: Container(
        margin: EdgeInsets.all(30),
        color: Colors.black,
      ),
    );
  }
}

Constraints 最大与最小宽高设定

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

  @override
  Widget build(BuildContext context) {
    return Container(
      constraints: BoxConstraints(
        maxWidth: 100,
        maxHeight: 100,
        minWidth: 50,
        minHeight: 50,
      ),
      alignment: Alignment.center,
      color: Colors.amber,
      child: Text("Hello"),
    );
  }
}

Decoration

调整细节的属性，例如boxShadow阴影、border边筐、shape形状...，要注意的是如果在Decoration设置颜色的话，Container就不能设置否则会有冲突，Decoration内的borderRadius与shape也会有冲突喔。

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

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 100,
      height: 100,
      decoration: BoxDecoration(
        boxShadow: [
          BoxShadow(
            color: Colors.red,
            blurRadius: 4,
            offset: Offset(4, 8),
          ),
        ],
        color: Colors.amber,
        border: Border.all(
          color: Colors.black,
          width: 8,
        ),
        borderRadius: BorderRadius.circular(12),
        // shape: BoxShape.circle,
      ),
    );
  }
}

Note

不能用html不知道该怎麽调整图片~