Flutter---Container

实现效果

Container的基础属性

//基础ContainerContainer(color: Colors.green,//背景颜色width: 200,//宽height: 100,//高alignment: Alignment(0, 0),//对齐方式margin: EdgeInsets.all(20),//外边距padding: EdgeInsets.symmetric(//内边距horizontal: 16,vertical: 8),child: Text("基础Container"),),

Container的高级属性

//高级装饰Container(width: 200,//宽height: 100,//高alignment: Alignment(0, 0),//对齐方式margin: EdgeInsets.all(20),//外边距padding: EdgeInsets.symmetric(//内边距horizontal: 16,vertical: 8),decoration: BoxDecoration(//高级装饰color: Colors.green,           // 背景色（优先于外层color）borderRadius: BorderRadius.circular(10), // 圆角border: Border.all(             // 边框color: Colors.black,width: 2,),boxShadow: [                    // 阴影BoxShadow(color: Colors.black26,blurRadius: 8,offset: Offset(2, 2),),],gradient: LinearGradient(        // 渐变colors: [Colors.blue, Colors.green],),),child: Text('装饰容器'),),

代码实例

main.dart

import 'dart:io';import 'package:flutter/material.dart'; //导入Material设计组件库void main() {runApp(const MyApp()); //应用入口
}class MyApp extends StatelessWidget { //应用根目录 （StatelessWidget不可变UI）const MyApp({super.key});//默认构造函数@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Flutter Demo', //应用标题（显示在任务管理器）theme: ThemeData(   //全局主题配置//colorScheme：自动生成的配色方案，textTheme:预定义的文字样式colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),),//首页，应用的第一个页面home: const MyHomePage(title: 'Flutter Demo Home Page'),//构造MyHomePage传入标题);}
}class MyHomePage extends StatefulWidget { //主页(有状态)，（StatefulWidget可变UI）//构造函数const MyHomePage({super.key, required this.title});//接收title参数，required表示强制必须传递该参数final String title; //存储通过构造函数传入的标题@overrideState<MyHomePage> createState() => _MyHomePageState();
}class _MyHomePageState extends State<MyHomePage> { //主页状态管理@overrideWidget build(BuildContext context) {return Scaffold( //页面骨架appBar: AppBar(//顶部应用栏组件//将AppBar的背景色设置为当前主题的反转主色backgroundColor: Theme.of(context).colorScheme.inversePrimary,title: Text(widget.title),//使用传入的标题),body: Center(//居中布局child: Column(mainAxisAlignment: MainAxisAlignment.center,//垂直居中children: [//基础ContainerContainer(color: Colors.green,//背景颜色width: 200,//宽height: 100,//高alignment: Alignment(0, 0),//对齐方式margin: EdgeInsets.all(20),//外边距padding: EdgeInsets.symmetric(//内边距horizontal: 16,vertical: 8),child: Text("基础Container"),),//高级装饰Container(width: 200,//宽height: 100,//高alignment: Alignment(0, 0),//对齐方式margin: EdgeInsets.all(20),//外边距padding: EdgeInsets.symmetric(//内边距horizontal: 16,vertical: 8),decoration: BoxDecoration(//高级装饰color: Colors.green,           // 背景色（优先于外层color）borderRadius: BorderRadius.circular(10), // 圆角border: Border.all(             // 边框color: Colors.black,width: 2,),boxShadow: [                    // 阴影BoxShadow(color: Colors.black26,blurRadius: 8,offset: Offset(2, 2),),],gradient: LinearGradient(        // 渐变colors: [Colors.blue, Colors.green],),),child: Text('装饰容器'),),],),),);}
}