Flutter 之Container
介绍
什么是Container?
这个跟Android中的ViewGroup很像,主要是做布局约束控制的,不太一样的地方Container只能有一只子控件
能力如下:
- margin 设置Container距离外边容器的边距
- padding 设置Container内部子空间和自己的边距
- witdh 设置宽度大小
- height 设置高度大小
- color 设置背景颜色
- child 设置子空间
- alignment 指的对其的方式,这个是指Container中子空间(child)的对其方式,不是指Container自己的对其方式
- decoration 通过这个属性可以Container 设置边框、弧度、图片等
效果展示
创建Container
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | import 'package:flutter/material.dart' ; void main() => runApp(MaterialApp( title: "Container Title" , home: Scaffold( appBar: AppBar( title: Text( "Container Titlte" , style: TextStyle(color: Colors.cyan), ), ), body: Container( color: Colors.yellow, width: 400 , height: 400 , child: Text( "Hello Container" ), ), ), )); |
设置边距
void main() => runApp(MaterialApp( title: "Container Title", home: Scaffold( appBar: AppBar( title: Text( "Container Titlte", style: TextStyle(color: Colors.cyan), ), ), body: Container( margin: EdgeInsets.all(20), padding: EdgeInsets.symmetric(horizontal: 100), color: Colors.yellow, width: 400, height: 400, child: Text("Hello Container"), ), ), ));
margin 上下左右设置20,padding设置子view 左边距离父view 100
设置对齐方式
void main() => runApp(MaterialApp( title: "Container Title", home: Scaffold( appBar: AppBar( title: Text( "Container Titlte", style: TextStyle(color: Colors.cyan), ), ), body: Container( alignment: Alignment.bottomRight, margin: EdgeInsets.all(20), padding: EdgeInsets.symmetric(horizontal: 100), color: Colors.yellow, width: 400, height: 400, child: Text("Hello Container",style: TextStyle(fontSize: 15,color: Colors.deepOrange),), ), ), ));
边框设置
边框设置主要是用到了decoration来来构建
void main() => runApp(MaterialApp( title: "Container Title", home: Scaffold( appBar: AppBar( title: Text( "Container Titlte", style: TextStyle(color: Colors.cyan), ), ), body: Container( decoration: BoxDecoration( //设置填充颜色 color: Colors.blue, //设置边框大小和颜色 border: Border.all(color: Colors.deepOrangeAccent,width: 20) ), alignment: Alignment.bottomRight, margin: EdgeInsets.all(20), padding: EdgeInsets.symmetric(horizontal: 100), color: Colors.yellow, width: 400, height: 400, child: Text("Hello Container",style: TextStyle(fontSize: 15,color: Colors.deepOrange),), ), ), ))
直接运行会包错误的
Failed assertion: line 266 pos 15: 'color == null || decoration == null': Cannot provide both a color and a decoration
什么意思呢?就是color和decoration不能同时设置,我们修改一下代码,把color注释掉
void main() => runApp(MaterialApp( title: "Container Title", home: Scaffold( appBar: AppBar( title: Text( "Container Titlte", style: TextStyle(color: Colors.cyan), ), ), body: Container( decoration: BoxDecoration( //设置填充颜色 color: Colors.blue, //设置边框大小和颜色 border: Border.all(color: Colors.deepOrangeAccent,width: 20) ), alignment: Alignment.bottomRight, margin: EdgeInsets.all(20), padding: EdgeInsets.symmetric(horizontal: 100), // color: Colors.yellow, width: 400, height: 400, child: Text("Hello Container",style: TextStyle(fontSize: 15,color: Colors.deepOrange),), ), ), ));
会发现有了一个橘红色的边框,内部填充区域是蓝色
如果加个圆角怎么弄呢?
import 'package:flutter/material.dart'; void main() => runApp(MaterialApp( title: "Container Title", home: Scaffold( appBar: AppBar( title: Text( "Container Titlte", style: TextStyle(color: Colors.cyan), ), ), body: Container( decoration: BoxDecoration( //设置填充颜色 color: Colors.blue, //设置10弧度的圆角 borderRadius: BorderRadius.all(Radius.circular(10)), //设置边框大小和颜色 border: Border.all(color: Colors.deepOrangeAccent,width: 20) ), alignment: Alignment.bottomRight, margin: EdgeInsets.all(20), padding: EdgeInsets.symmetric(horizontal: 100), // color: Colors.yellow, width: 400, height: 400, child: Text("Hello Container",style: TextStyle(fontSize: 15,color: Colors.deepOrange),), ), ), ));
发现边框出现了弧度,现在decoration 有点像Android 中的Shape
设置阴影和渐变
设置渐变后,填充color的颜色蓝色被渐变的颜色给覆盖了,边框外边多了绿颜色的一个阴影效果
设置图片
void main() => runApp(MaterialApp( title: "Container Title", home: Scaffold( appBar: AppBar( title: Text( "Container Titlte", style: TextStyle(color: Colors.cyan), ), ), body: Container( decoration: BoxDecoration( //设置填充颜色 color: Colors.blue, //设置10弧度的圆角 borderRadius: BorderRadius.all(Radius.circular(10)), //设置阴影 boxShadow: <BoxShadow>[ BoxShadow( color: Colors.green, blurRadius: 1.0, spreadRadius: 1.0, offset: Offset(-1.0, 1.0), ), ], //设置渐变 gradient: LinearGradient(colors: [Colors.cyan, Colors.black]), //给背景设置图片 image: DecorationImage( image: NetworkImage( "http://img5.duitang.com/uploads/item/201206/15/20120615031447_R5EcS.jpeg")), //设置边框大小和颜色 border: Border.all(color: Colors.deepOrangeAccent, width: 20)), alignment: Alignment.bottomRight, margin: EdgeInsets.all(20), padding: EdgeInsets.symmetric(horizontal: 100), // color: Colors.yellow, width: 400, height: 400, child: Text( "Hello Container", style: TextStyle(fontSize: 15, color: Colors.deepOrange), ), ), ), ));
发现渐变和图片进行了叠加,图片显示在最上方
设置前景色
void main() => runApp(MaterialApp( title: "Container Title", home: Scaffold( appBar: AppBar( title: Text( "Container Titlte", style: TextStyle(color: Colors.cyan), ), ), body: Container( decoration: BoxDecoration( //设置填充颜色 color: Colors.blue, //设置10弧度的圆角 borderRadius: BorderRadius.all(Radius.circular(10)), //设置阴影 boxShadow: <BoxShadow>[ BoxShadow( color: Colors.green, blurRadius: 1.0, spreadRadius: 1.0, offset: Offset(-1.0, 1.0), ), ], //设置渐变 gradient: LinearGradient(colors: [Colors.cyan, Colors.black]), //给背景设置图片 image: DecorationImage( image: NetworkImage( "http://img5.duitang.com/uploads/item/201206/15/20120615031447_R5EcS.jpeg")), //设置边框大小和颜色 border: Border.all(color: Colors.deepOrangeAccent, width: 20)), alignment: Alignment.bottomRight, margin: EdgeInsets.all(20), padding: EdgeInsets.symmetric(horizontal: 100), foregroundDecoration: BoxDecoration( image: DecorationImage( image: NetworkImage( 'http://www.pptbz.com/pptpic/UploadFiles_6909/201203/2012031220134655.jpg'), centerSlice: Rect.fromLTRB(270.0, 180.0, 1360.0, 730.0), ), ), // color: Colors.yellow, width: 400, height: 400, child: Text( "Hello Container", style: TextStyle(fontSize: 15, color: Colors.deepOrange), ), ), ), ));
发现一旦设置了前景色,所有的内容都被遮挡住了
约束限制
void main() => runApp(MaterialApp( title: "Container Title", home: Scaffold( appBar: AppBar( title: Text( "Container Titlte", style: TextStyle(color: Colors.cyan), ), ), body: Container( //设置最大宽高为200 constraints: BoxConstraints(maxHeight: 200, maxWidth: 200), decoration: BoxDecoration( //设置填充颜色 color: Colors.blue, //设置10弧度的圆角 borderRadius: BorderRadius.all(Radius.circular(10)), //设置阴影 boxShadow: <BoxShadow>[ BoxShadow( color: Colors.green, blurRadius: 1.0, spreadRadius: 1.0, offset: Offset(-1.0, 1.0), ), ], //设置渐变 gradient: LinearGradient(colors: [Colors.cyan, Colors.black]), //给背景设置图片 image: DecorationImage( image: NetworkImage( "http://img5.duitang.com/uploads/item/201206/15/20120615031447_R5EcS.jpeg")), //设置边框大小和颜色 border: Border.all(color: Colors.deepOrangeAccent, width: 20)), alignment: Alignment.bottomRight, margin: EdgeInsets.all(20), padding: EdgeInsets.symmetric(horizontal: 100), foregroundDecoration: BoxDecoration( image: DecorationImage( image: NetworkImage( 'http://www.pptbz.com/pptpic/UploadFiles_6909/201203/2012031220134655.jpg'), centerSlice: Rect.fromLTRB(270.0, 180.0, 1360.0, 730.0), ), ), // color: Colors.yellow, width: 400, height: 400, child: Text( "Hello Container", style: TextStyle(fontSize: 15, color: Colors.deepOrange), ), ), ), ));
constraints 用来显示Container的宽高
发现布局变小了,因为我们指定的最大狂宽高是200
作者:饥饿的大灰狼
来源:简书
分类:
Flutter & Darta
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
· .NET 9 new features-C#13新的锁类型和语义
· Sdcb Chats 技术博客:数据库 ID 选型的曲折之路 - 从 Guid 到自增 ID,再到
· 语音处理 开源项目 EchoSharp
· 《HelloGitHub》第 106 期
· Spring AI + Ollama 实现 deepseek-r1 的API服务和调用
· 使用 Dify + LLM 构建精确任务处理应用
2019-03-19 [iOS]UIFont的lineHeight与pointSize