Container容器组件
代码
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text("这是导航栏")),
body: const Column(children: [ //引入多个主键
myBody(),
MyButton()
],))
));
}
// ignore: camel_case_types
class myBody extends StatelessWidget {
const myBody({super.key});
@override
Widget build(BuildContext context) {
return Center(
child: Container(
// alignment: Alignment.center, //配置Container内容器的方位
alignment: Alignment.center, //配置Container内容器的方位
width: 200,
height: 200,
// transform: Matrix4.translationValues(40, 0, 0), //位移
// transform: Matrix4.rotationZ(0.2), //旋转
// transform: Matrix4.skewX(0.2), //倾斜
margin: const EdgeInsets.all(20.0),
decoration: BoxDecoration(
color: const Color.fromARGB(255, 13, 212, 103), //背景颜色
border: Border.all(
//边框
color: Colors.red, //边框颜色
width: 2.0),
borderRadius: BorderRadius.circular(40), //圆角
boxShadow: const [
//配置阴影效果
BoxShadow(
color: Color.fromARGB(255, 236, 130, 8),
offset: Offset(10.0, 10.0), //在 Flutter 中,Offset 是一个简单的二维坐标点
blurRadius: 100.0, //阴影范围
)
],
gradient: const LinearGradient( // LinearGradient 背景线性渐变 RadialGradient径向渐变
colors: [Color.fromARGB(255, 186, 192, 104), Color.fromARGB(255, 116, 240, 213)]),
),
child: const Text("这是 内容",
style: TextStyle(color: Colors.red, fontSize: 20.0)),
));
}
}
//按扭
class MyButton extends StatelessWidget {
const MyButton({super.key});
@override
Widget build(BuildContext context) {
return Container(
width: 240,
height: 60,
alignment:Alignment.center,
// margin: const EdgeInsets.all(20.0), //所有的外边距
margin: const EdgeInsets.fromLTRB(20, 40, 20, 30), //四周的外边距
decoration: BoxDecoration( color: const Color.fromARGB(255, 99, 193, 221),
borderRadius: BorderRadius.circular(20)), //圆角
child: const Text("按钮",style: TextStyle(
color: Color.fromARGB(255, 9, 1, 31),
fontSize: 20,
),),
);
}
}
图
padding 和maring
padding 是让容器和里面的元素有相应的间距,margin是让容器和容器外部的其他容器有相应的间距
Container(
margin: EdgeInsets.all(20.0), //容器外补白
color: Colors.orange,
child: Text("Hello world!"),
),
Container(
padding: EdgeInsets.all(20.0), //容器内补白
color: Colors.orange,
child: Text("Hello world!"),
),
mainAxisAlignment: MainAxisAlignment.start, // 子部件在纵向上左对齐
crossAxisAlignment: CrossAxisAlignment.start, // 子部件在横向上左对齐
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 本地部署 DeepSeek:小白也能轻松搞定!
· 如何给本地部署的DeepSeek投喂数据,让他更懂你
· 从 Windows Forms 到微服务的经验教训
· 李飞飞的50美金比肩DeepSeek把CEO忽悠瘸了,倒霉的却是程序员
· 超详细,DeepSeek 接入PyCharm实现AI编程!(支持本地部署DeepSeek及官方Dee