Las tazas, tazones, cuencos y otros recipientes son inseparables en la vida.
Necesita una taza para beber agua, un cuenco para arroz y carne, y una palangana para lavarse la cara y los pies.
Las tazas, cuencos y lavabos tienen su propio color, ancho y alto, todos estos atributos fueron adquiridos en la tienda de acuerdo a nuestras necesidades.
El contenedor (contenedor) con el que entramos en contacto en el desarrollo de Flutter también tiene atributos relacionados para que los usemos.
El contenedor puede mostrar diferentes tamaños y estilos de diseño de acuerdo con la configuración de las propiedades y también puede acomodar otros widgets.
El contenedor solo puede ser un contenedor, porque puede contener otros widgets.
Atributos comunes ancho, alto, color, alineación, relleno
........
Ancho y alto fijo
Center(
child: Container(width: 100.0,height: 100.0,color: Colors.blue,),
),
Center(
child: Container(width: 200.0,height: 100.0,color: Colors.red,),
)Anchura y altura infinitas
Center(
child: Container(
width: double.infinity,
height: double.infinity,
//color: Colors.red,
decoration: BoxDecoration(color: Colors.blue,),
),
)Ancho y alto> = - 0.0 (ancho y alto son números positivos y -0.0)
Center(
child: Container(
width: -100.0,
height: -100.0,
//color: Colors.red,
decoration: BoxDecoration(color: Colors.blue,),
),
),Funcionamiento anormal
Restricciones de ancho y alto del contenedor
Sub-widget
Alineación común
topLeft 、 topCenter 、 topRight 、 centerIzquierda 、 centro 、 centroDerecha 、 inferiorIzquierda 、 inferiorCenter 、 inferiorDcha
La alineación se basa en el punto central del contenedor.
Centro de alineación = Alineación (0.0, 0.0)
Container(
width: 200.0,
height: 200.0,
color: Colors.red,
alignment: Alignment.center,
child: Text("xmiaoshen"),
),
)La alineación se basa en la parte superior izquierda del contenedor.
Alineación topLeft = Alineación (-1.0, -1.0)
Container(
width: 200.0,
height: 200.0,
color: Colors.blue,
alignment: Alignment.topLeft,
child: Text("xmiaoshen",style: TextStyle(fontWeight: FontWeight.bold,fontSize: 18.0),),
)Alineación personalizada
Container(
width: 200.0,
height: 200.0,
color: Colors.blue,
alignment: Alignment(0.5,0.5),
child: Text("xmiaoshen",style: TextStyle(fontWeight: FontWeight.bold,fontSize: 18.0),),
),Margen interior
Acolchado: la distancia entre los widgets dentro del contenedor y los cuatro lados.
Container(
width: 200.0,
height: 200.0,
color: Colors.blue,
padding: EdgeInsets.only(top: 10.0,left: 10.0),
alignment: Alignment.topLeft,
child: Text("xmiaoshen",style: TextStyle(fontWeight: FontWeight.bold,fontSize: 18.0),),
)Cuando el ancho y el alto del widget secundario exceden o igualan al contenedor principal, la propiedad de relleno sigue siendo válida
Container(
width: 200.0,
height: 200.0,
color: Colors.blue,
padding: EdgeInsets.all(18.0),
alignment: Alignment.topLeft,
child: Container(width: 200.0,height: 200.0,color: Colors.black45,),
)Container(
width: 200.0,
height: 200.0,
color: Colors.blue,
padding: EdgeInsets.all(18.0),
alignment: Alignment.topLeft,
child: Container(width: 300.0,height: 300.0,color: Colors.black45,),
)Margen
Margen: la distancia entre el contenedor y los cuatro lados del contenedor principal.
Container(
width: 200.0,
height: 200.0,
color: Colors.blue,
alignment: Alignment.topLeft,
child: Container(
width: 200.0,
height: 200.0,
color: Colors.black45,
margin: EdgeInsets.all(20.0),
),
)Cuando el ancho y la altura del contenedor superan o igualan al contenedor principal, el margen de la propiedad de margen sigue siendo válido
Container(
width: 200.0,
height: 200.0,
color: Colors.blue,
alignment: Alignment.topLeft,
child: Container(
width: 300.0,
height: 300.0,
color: Colors.black45,
margin: EdgeInsets.all(20.0),
),
)Agregar restricciones
Restricciones de contenedores
Cuando establecemos el ancho del contenedor, debe estar entre minWith y maxWith .
Cuando fijamos la altura del contenedor, que debe estar entre minHeight y maxHeight .
Embellecer contenedor
Estableciendo las propiedades del contenedor
decoración (decoración, decoración)
Caja
Establecer borde
Container(
width: 200.0,
height: 200.0,
//color: Colors.black45,
decoration: BoxDecoration(
color: Colors.blue,
border: Border.all(color: Colors.purple,width: 6.0),
),
)Borde redondeado
Container(
width: 200.0,
height: 200.0,
//color: Colors.black45,
decoration: BoxDecoration(
color: Colors.blue,
border: Border.all(color: Colors.purple,width: 6.0),
borderRadius: BorderRadius.all(Radius.circular(20.0))
),
)
Container(
width: 200.0,
height: 200.0,
//color: Colors.black45,
decoration: BoxDecoration(
color: Colors.blue,
border: Border.all(color: Colors.purple,width: 6.0),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20.0),
bottomRight: Radius.circular(20.0))
),
)Rectángulo para redondear
Container(
width: 200.0,
height: 200.0,
//color: Colors.black45,
decoration: BoxDecoration(
color: Colors.blue,
border: Border.all(color: Colors.purple,width: 6.0),
shape: BoxShape.circle
),
)Establecer sombra
offset 阴影开始坐标(相对于手机屏幕原点偏移量) ,blurRadius 阴影模糊半径 ,spreadRadius 阴影扩散半径.
Container(
width: 200.0,
height: 200.0,
//color: Colors.black45,
decoration: BoxDecoration(
color: Colors.blue,
boxShadow: [
BoxShadow(
color: Colors.purple,
offset: Offset(-6.0, 6.0),
blurRadius: 6.0,spreadRadius: 3.0)
],
shape: BoxShape.rectangle),
)
Container(
width: 200.0,
height: 200.0,
//color: Colors.black45,
decoration: BoxDecoration(
color: Colors.blue,
boxShadow: [
BoxShadow(
color: Colors.purple,
offset: Offset(-6.0, 6.0),
blurRadius: 6.0,spreadRadius: 3.0)
],
shape: BoxShape.circle),
)Fondo degradado
Container(
width: 200.0,
height: 200.0,
//color: Colors.black45,
decoration: BoxDecoration(
color: Colors.blue,
gradient: LinearGradient(colors: [
Colors.blue.withOpacity(1.0),
Colors.blue.withOpacity(0.9),
Colors.blue.withOpacity(0.8),
Colors.blue.withOpacity(0.7),
Colors.blue.withOpacity(0.6),
Colors.blue.withOpacity(0.5),
Colors.blue.withOpacity(0.4),
Colors.blue.withOpacity(0.3),
Colors.blue.withOpacity(0.2),
Colors.blue.withOpacity(0.1),
], begin: Alignment.topCenter,
end: Alignment.bottomCenter)),
)el pequeño sol
Container(
width: 200.0,
height: 200.0,
//color: Colors.black45,
decoration: BoxDecoration(
color: Colors.blue,
gradient: RadialGradient(
center: const Alignment(0.0, 0.0), // near the top right
radius: 0.2,
colors: [
const Color(0xFFFFFF00), // yellow sun
const Color(0xFF0099FF), // blue sky
],
stops: [0.3, 1.0],
)),
)referencia