这几天写Flutter，函数内设置属性，属性里套着构造函数，慢慢有点习惯面向对象的思维了。

细碎笔记：

class MyButton extends StatelessWidget {
  const MyButton({super.key});

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        debugPrint('Button clicked');
      },
      child: Container(
        alignment: Alignment.center,
        height: 50,
        width: 200,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(5.0),
          color: Colors.lightGreen[500],
        ),
        child: const Center(
          child: Text(
            'Click me!',
            style: TextStyle(
              fontSize: 20,
              color: Colors.white,
              fontFamily: 'Consolas',
            ),
          ),
        ),
      ),
    );
  }
}

一个简单的按钮，同时包含了Container的一些属性设置方法，比如alignment设置元素位置，decoration设置背景色，边框，圆角等。

child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [MyContainer(), MyButton()],
          )

用Colomn包含多个组件的方法，使用数组。

class MyContainer extends StatelessWidget {
  const MyContainer({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.all(20.0),
      alignment: Alignment.center,
      width: 200,
      height: 200,
      decoration: BoxDecoration(
        color: Colors.lightBlue[200],
        border: Border.all(
          color: Colors.black,
          width: 8,
        ),
        borderRadius: BorderRadius.circular(30),
      ),
      child: const Text(
        'Hello World',
        style: TextStyle(
          fontSize: 25,
          color: Colors.yellow,
          fontFamily: 'Consolas',
          fontStyle: FontStyle.normal,
        ),
      ),
    );
  }
}

更全面的Container演示。