感君一回顾，思君朝与暮。
<一>创建视图
Container类似我们iOS中的UIView大致可以理解为容器的意思
Container里面的child属性代表着他可以装载控件类型的widget-
代码
import 'package:flutter/material.dart'; class FMContainerVC extends StatelessWidget { const FMContainerVC({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return Container( child: Scaffold( appBar: AppBar( title: const Text( "Container", ), backgroundColor: Colors.lightBlue, ), body: _container(), ), ); } Container _container() { return Container( // 在这里尝试 Container 属性效果 ); } } -
颜色和大小
Container _container() { return Container( // 在这里尝试 Container 属性效果 // 直接使用 color 属性改变背景色，使用 width 设置宽度，使用 height 属性设置高度。 // width: 200, // height: 200, color: Colors.red, // // 使用 constraints 属性来改变 container 大小 // constraints: const BoxConstraints.expand( // width: 320, // height: 200, // ), // 执行约束 margin: const EdgeInsets.only(left: 10, top: 10, right: 10, bottom: 10), ); } -
Border 边框设置
注意：decoration 属性和 color 属性不可以同时使用，否则会如下报错。在 decoration 属性里也可以设置背景色color，如需要同时使用边框和背景色，可以在decoration里设置。Container _container() { return Container( // 在这里尝试 Container 属性效果 // 直接使用 color 属性改变背景色，使用 width 设置宽度，使用 height 属性设置高度。 // width: 200, // height: 200, // color: Colors.red, // // 使用 constraints 属性来改变 container 大小 // constraints: const BoxConstraints.expand( // width: 320, // height: 200, // ), // 执行约束 margin: const EdgeInsets.only(left: 100, top: 100, right: 100, bottom: 100), decoration: BoxDecoration( border: Border.all( color: Colors.red, width: 3, ), color: Colors.yellow, //边框圆角 borderRadius:const BorderRadius.only( topLeft: Radius.circular(0), topRight: Radius.circular(0), bottomLeft: Radius.circular(30), bottomRight: Radius.circular(30)), ), ); } -
自定义边框
注意：使用自定义 border 时，不可以使用 borderRadius 属性，否则会报错Container _container() { return Container( // 在这里尝试 Container 属性效果 margin: const EdgeInsets.only(left: 100, top: 100, right: 100, bottom: 100), decoration: const BoxDecoration( // border: Border.all( // color: Colors.red, // width: 3, // ), border: Border( top: BorderSide( width: 3, color: Colors.cyan, ), left: BorderSide( width: 3, color: Colors.blue, ), right: BorderSide( width: 3, color: Colors.black, ), bottom: BorderSide( width: 3, color: Colors.orange, ), ), ), ); } -
底色渐变
Container _container() { return Container( // 在这里尝试 Container 属性效果 margin: const EdgeInsets.only(left: 100, top: 100, right: 100, bottom: 100), decoration: BoxDecoration( border: Border.all( color: Colors.red, width: 3, ), borderRadius: BorderRadius.circular(30), gradient: LinearGradient(colors: [Colors.white, Colors.yellow], begin: FractionalOffset(0, 0), end: FractionalOffset(0, 1)), // border: Border( // top: BorderSide( // width: 3, // color: Colors.cyan, // ), // left: BorderSide( // width: 3, // color: Colors.blue, // ), // right: BorderSide( // width: 3, // color: Colors.black, // ), // bottom: BorderSide( // width: 3, // color: Colors.orange, // ), // ), ), ); } -
设置背景图
Container _container() { return Container( // 在这里尝试 Container 属性效果 margin: const EdgeInsets.only(left: 100, top: 100, right: 100, bottom: 100), decoration: BoxDecoration( border: Border.all( color: Colors.red, width: 3, ), borderRadius: BorderRadius.circular(30), image: DecorationImage( image: NetworkImage('http://tiebapic.baidu.com/forum/w%3D580/sign=a96ca741eafaaf5184e381b7bc5594ed/7ea6a61ea8d3fd1f2643ad5d274e251f95ca5f38.jpg'), // centerSlice: Rect.largest, ), gradient: LinearGradient(colors: [Colors.white, Colors.yellow], begin: FractionalOffset(0, 0), end: FractionalOffset(0, 1)), // border: Border( // top: BorderSide( // width: 3, // color: Colors.cyan, // ), // left: BorderSide( // width: 3, // color: Colors.blue, // ), // right: BorderSide( // width: 3, // color: Colors.black, // ), // bottom: BorderSide( // width: 3, // color: Colors.orange, // ), // ), ), ); } -
设置阴影
Container _container() { return Container( // 在这里尝试 Container 属性效果 margin: const EdgeInsets.only(left: 100, top: 100, right: 100, bottom: 100), decoration: BoxDecoration( border: Border.all( color: Colors.red, width: 3, ), borderRadius: BorderRadius.circular(30), boxShadow: [BoxShadow(color: Colors.grey, offset: Offset(10,10))], image: DecorationImage( image: NetworkImage('http://tiebapic.baidu.com/forum/w%3D580/sign=a96ca741eafaaf5184e381b7bc5594ed/7ea6a61ea8d3fd1f2643ad5d274e251f95ca5f38.jpg'), // centerSlice: Rect.largest, ), gradient: LinearGradient(colors: [Colors.white, Colors.yellow], begin: FractionalOffset(0, 0), end: FractionalOffset(0, 1)), // border: Border( // top: BorderSide( // width: 3, // color: Colors.cyan, // ), // left: BorderSide( // width: 3, // color: Colors.blue, // ), // right: BorderSide( // width: 3, // color: Colors.black, // ), // bottom: BorderSide( // width: 3, // color: Colors.orange, // ), // ), ), ); } -
child 子控件
使用 child 属性给 container 添加子控件，使用 padding 属性设置子控件的范围，使用 alignment 来设置子控件的居中属性。
padding 属性，你可以理解为 child 距离该 container 4个边框的边界距离，例如 padding: const EdgeInsets.all(30),
就是距离 child 上方距离 container 上左下右4个方向各30像素Container _container() { return Container( // 在这里尝试 Container 属性效果 margin: const EdgeInsets.only(left: 100, top: 100, right: 100, bottom: 100), transform: Matrix4.rotationZ(0.1), // alignment: Alignment.centerLeft, padding: const EdgeInsets.all(30), child:const Text( "Container", style: TextStyle( fontSize: 30, color: Colors.red, backgroundColor: Colors.orange, ), ), decoration: BoxDecoration( border: Border.all( color: Colors.red, width: 3, ), borderRadius: BorderRadius.circular(30), boxShadow: [BoxShadow(color: Colors.grey, offset: Offset(10,10))], //旋转 image: DecorationImage( image: NetworkImage('http://tiebapic.baidu.com/forum/w%3D580/sign=a96ca741eafaaf5184e381b7bc5594ed/7ea6a61ea8d3fd1f2643ad5d274e251f95ca5f38.jpg'), // centerSlice: Rect.largest, ), gradient: LinearGradient(colors: [Colors.white, Colors.yellow], begin: FractionalOffset(0, 0), end: FractionalOffset(0, 1)), // border: Border( // top: BorderSide( // width: 3, // color: Colors.cyan, // ), // left: BorderSide( // width: 3, // color: Colors.blue, // ), // right: BorderSide( // width: 3, // color: Colors.black, // ), // bottom: BorderSide( // width: 3, // color: Colors.orange, // ), // ), ), ); }
