当前位置：首页 > news >正文

Flutter基础（Children|Actions|Container|decoration|child）

news 2025/6/29 9:18:44

代码

showDialog(context: context,builder: (BuildContext context) {return AlertDialog(title: const Text('请输入图形验证码'),content: Column(mainAxisSize: MainAxisSize.min,children: [// 显示验证码图片Container(width: double.infinity,height: 60,decoration: BoxDecoration(border: Border.all(color: Colors.grey),borderRadius: BorderRadius.circular(4),),child: Image.memory(base64Decode(_captchaImageBase64!.split(',')[1]),fit: BoxFit.contain,),),const SizedBox(height: 16),// 验证码输入框TextField(controller: captchaController,decoration: const InputDecoration(hintText: '请输入验证码',border: OutlineInputBorder(),),),],),actions: [TextButton(onPressed: () {Navigator.of(context).pop();},child: const Text('取消'),),TextButton(onPressed: () {final answer = captchaController.text.trim();if (answer.isNotEmpty) {Navigator.of(context).pop();_sendEmailCode(answer);}},child: const Text('确定'),),],);},);

🎁 Container 的结构比喻

把 Container 想象成一个礼物盒：

child：盒子里的礼物（例如文字、图片、按钮等）。
decoration：盒子的包装纸（背景色、边框、圆角、阴影等装饰效果）。
注意：decoration 和 color 不可同时使用（会冲突）。

🎨 `decoration` 的用法

decoration 通过 BoxDecoration 类设置背景样式。

🎁 `child` 的用法

child 是 Container 内部的内容，可以是任何 Widget。

Container(decoration: BoxDecoration(color: Colors.yellow, borderRadius: BorderRadius.circular(10)),child: Text("Hello Flutter!", style: TextStyle(fontSize: 20)), // child 是文字
)

常见 child 类型：

文字（Text）、图标（Icon）、图片（Image）、按钮（ElevatedButton）等。
甚至另一个 Container（嵌套容器）。

🧩 组合示例

示例 1：圆角按钮

Container(decoration: BoxDecoration(color: Colors.blue,borderRadius: BorderRadius.circular(20), // 圆角boxShadow: [BoxShadow(color: Colors.grey, blurRadius: 5)] // 阴影),padding: EdgeInsets.all(12), // 内边距（文字与边框的距离）child: Text("点我", style: TextStyle(color: Colors.white)),
)

效果：蓝色圆角按钮，带灰色阴影，文字居中显示。

示例 2：圆形头像

Container(width: 100,height: 100,decoration: BoxDecoration(shape: BoxShape.circle, // 圆形image: DecorationImage(image: NetworkImage("头像链接"), fit: BoxFit.cover),border: Border.all(color: Colors.purple, width: 2),),
)

Children（孩子们）—— 像“盒子里的玩具”

想象你有一个魔法盒子（比如 Row、Column 或 Stack），这个盒子可以装很多小玩具（其他小部件）。children 就是这个盒子的“玩具清单”，告诉盒子里面要放什么玩具。

Column( // 一个竖着放的魔法盒子children: [ // 盒子里要放的玩具清单Text("我是积木1"), // 玩具1：文字Icon(Icons.star), // 玩具2：星星图标Image.network("小猫图片.jpg"), // 玩具3：网络图片],
)

作用：children 让多个小部件像排队一样组合在一起（横着排、竖着排或叠起来）。
就像：把你的乐高小人、小车、房子都放进一个收纳盒里！

Actions（动作）—— 像“遥控器的按钮”

actions 是专门给 AppBar（顶部的导航栏） 用的参数。它用来放一排小按钮（比如搜索、设置），每个按钮按下去都会触发一个“动作”。

AppBar(title: Text("我的游戏"), // 标题actions: [ // 右边的一排按钮IconButton( // 按钮1：搜索icon: Icon(Icons.search),onPressed: () { print("开始搜索！"); },),IconButton( // 按钮2：设置icon: Icon(Icons.settings),onPressed: () { print("打开设置！"); },),],
)