import 'package:flutter/material.dart';
/// 主入口
void main() {
runApp(const MaterialApp(
home: Scaffold(appBar: null, body: TheColumn()),
));
}
/// 最外层返回一个列
class TheColumn extends StatelessWidget {
const TheColumn({super.key});
Widget build(BuildContext context) {
return Column(children: const [TheContainer(), TheButton()]);
}
}
/// 最外层返回一个Center布局
class TheCenter extends StatelessWidget {
const TheCenter({super.key});
Widget build(BuildContext context) {
return const Center(
child: TheContainer(),
);
}
}
/// 返回一个盒子
class TheContainer extends StatelessWidget {
const TheContainer({super.key});
static const bg = [Colors.green, Colors.yellow, Colors.red];
Widget build(BuildContext context) {
return Container(
// Container容器内元素方位
alignment: Alignment.center,
width: 100,
height: 100,
padding: const EdgeInsets.fromLTRB(0, 20, 0, 0),
// 偏移
// transform: Matrix4.translationValues(10,10,20),
// 旋转
// transform: Matrix4.rotationX(2),
transform: Matrix4.skewY(2),
// 盒子样式
decoration: BoxDecoration(
// color: Colors.yellow,
border: Border.all(color: Colors.red, width: 2),
// 圆角
borderRadius: BorderRadius.circular(10),
// 配置阴影效果
boxShadow: const [BoxShadow(color: Colors.black, blurRadius: 10.0)],
// 背景颜色渐变颜色 LinearGradient线性渐变,RadiaGradient内到外渐变
gradient: const RadialGradient(colors: bg)),
child: const TheText());
}
}
/// 文本
class TheText extends StatelessWidget {
const TheText({super.key});
Widget build(BuildContext context) {
return const Text(
"你好",
style: TextStyle(color: Colors.black),
);
}
}
/// 返回一个按钮
class TheButton extends StatelessWidget {
const TheButton({super.key});
Widget build(BuildContext context) {
return Container(
width: 100,
height: 40,
alignment: Alignment.center,
// padding: const EdgeInsets.fromLTRB(0, 0, 0, 0),
margin: const EdgeInsets.all(1),
decoration: BoxDecoration(
color: Colors.blue, borderRadius: BorderRadius.circular(10)),
child: const Text(
'按钮',
style: TextStyle(color: Colors.white, fontSize: 20),
),
);
}
}
1.Container和Text
最新推荐文章于 2024-08-23 11:49:18 发布