Container详解

时间 2019-11-08

标签 container 详解繁體版

原文原文链接

Container是一个拥有绘制、定位、调整大小的widget。android

padding和margin

padding和margin分别设置Container的内边距和外边距。可取值包括下面四个：app

EdgeInsets.all(50)：设置全部的padding为同一个值50。
EdgeInsets.only(left: 50,right: 50)：只设置左边和右边。
EdgeInsets.fromLTRB(50,10,50,10)：分别设置左上右下的值为50、10。
EdgeInsets.symmetric(vertical: 10,horizontal: 50)：若是上下或者左右的padding值同样能够指定vertical的值为上下的padding值。horizontal指定左右的padding值。

Scaffold(
    appBar: AppBar(title: Text('Container')),
    body: Center(
    child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
        Container(
            padding: EdgeInsets.all(50),
            decoration: BoxDecoration(
                border: Border.all(color: Colors.red, width: 1),
                borderRadius: BorderRadius.all(Radius.circular(20))),
            child: Text(
            "肯定",
            style: TextStyle(color: Colors.red),
            ),
        ),
        Container(
            padding: EdgeInsets.only(left: 50,right: 50),
            decoration: BoxDecoration(
                border: Border.all(color: Colors.red, width: 1),
                borderRadius: BorderRadius.all(Radius.circular(20))),
            child: Text(
            "肯定",
            style: TextStyle(color: Colors.red),
            ),
        ),
        Container(
            padding: EdgeInsets.fromLTRB(50, 10, 50, 10),
            decoration: BoxDecoration(
                border: Border.all(color: Colors.red, width: 1),
                borderRadius: BorderRadius.all(Radius.circular(20))),
            child: Text(
            "肯定",
            style: TextStyle(color: Colors.red),
            ),
        ),
        Container(
            padding: EdgeInsets.symmetric(vertical: 10, horizontal: 50),
            decoration: BoxDecoration(
                border: Border.all(color: Colors.red, width: 1),
                borderRadius: BorderRadius.all(Radius.circular(20))),
            child: Text(
            "肯定",
            style: TextStyle(color: Colors.red),
            ),
        ),
        ],
    ),
)),

width和height

width和height指定宽高，若是不指定则为子widget的宽高。若是想要彻底撑满父容器，能够将width和height设置为double.infinity。spa

decoration

decoration常常被用来改变一个Container的展现效果。其概念相似与android中的shape。通常实际场景中会使用他的子类BoxDecoration。BoxDecoration提供了对背景色，边框，圆角，阴影和渐变等功能的定制能力。code

image: DecorationImage设置一张图片做为背景。
border: Border设置边界。
borderRadius: BorderRadius设置边界圆角。当shape是BoxShape.circle设置borderRadius将不起做用
shape: BoxShape设置形状。
gradient设置渐变。可选值包括三种类型的渐变LinearGradient、RadialGradient、SweepGradient。

Scaffold(
    appBar: AppBar(title: Text('BorderRadius')),
    body: Center(
        child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
            Container(
            height: 200,
            width: 200,
            decoration: BoxDecoration(
                color: Colors.yellow,
                //设置图片
                image: DecorationImage(
                    fit: BoxFit.fitWidth,
                    image: NetworkImage(
                    'https://flutter.io/images/catalog-widget-placeholder.png',
                    ),
                ),
                //设置边界
                border: Border.all(color: Colors.deepOrange, width: 3),
                //设置阴影
                boxShadow: const [
                    BoxShadow(blurRadius: 10),
                ],
                //设置边界圆角
                borderRadius: BorderRadius.all(Radius.circular(18))),
            ),
            Container(
            height: 200,
            width: 200,
            decoration: BoxDecoration(
                gradient: RadialGradient(
                //渐变
                colors: const [
                    Colors.green,
                    Colors.deepOrange,
                    Colors.pinkAccent,
                    Colors.deepPurple
                ],
                ),
                //设置边界圆角
                shape: BoxShape.circle,
            ),
            )
        ],
        ),
    ),
),

2.Column和Row

MainAxisAlignment

Scaffold(
    appBar: AppBar(title: Text('Flutter')),
    body: Column(
        children: <Widget>[
        Text("MainAxisAlignment.start",style:TextStyle(
            color: Colors.blueAccent,
            fontSize: 18
        )),
        Row(
            mainAxisAlignment: MainAxisAlignment.start,
            children: <Widget>[
            Icon(Icons.star,color: Colors.yellow, size: 50),
            Icon(Icons.star,color: Colors.yellow, size: 50),
            Icon(Icons.star,color: Colors.yellow, size: 50),
            ],
        ),
        Text("MainAxisAlignment.center",style:TextStyle(
            color: Colors.blueAccent,
            fontSize: 18
        )),
        Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
            Icon(Icons.star,color: Colors.yellow, size: 50),
            Icon(Icons.star,color: Colors.yellow, size: 50),
            Icon(Icons.star,color: Colors.yellow, size: 50),
            ],
        ),
        Text("MainAxisAlignment.spaceAround",style:TextStyle(
            color: Colors.blueAccent,
            fontSize: 18
        )),
        Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: <Widget>[
            Icon(Icons.star,color: Colors.yellow, size: 50),
            Icon(Icons.star,color: Colors.yellow, size: 50),
            Icon(Icons.star,color: Colors.yellow, size: 50),
            ],
        ),
        Text("MainAxisAlignment.spaceBetween",style:TextStyle(
            color: Colors.blueAccent,
            fontSize: 18
        )),
        Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
            Icon(Icons.star,color: Colors.yellow, size: 50),
            Icon(Icons.star,color: Colors.yellow, size: 50),
            Icon(Icons.star,color: Colors.yellow, size: 50),
            ],
        ),
        Text("MainAxisAlignment.spaceEvenly",style:TextStyle(
            color: Colors.blueAccent,
            fontSize: 18
        )),
        Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
            Icon(Icons.star,color: Colors.yellow, size: 50),
            Icon(Icons.star,color: Colors.yellow, size: 50),
            Icon(Icons.star,color: Colors.yellow, size: 50),
            ],
        ),
        Text("MainAxisAlignment.end",style:TextStyle(
            color: Colors.blueAccent,
            fontSize: 18
        )),
        Row(
            mainAxisAlignment: MainAxisAlignment.end,
            children: <Widget>[
            Icon(Icons.star,color: Colors.yellow, size: 50),
            Icon(Icons.star,color: Colors.yellow, size: 50),
            Icon(Icons.star,color: Colors.yellow, size: 50),
            ],
        )
        ],
    ),
),

crossAxisAlignment

Scaffold(
    appBar: AppBar(title: Text('Flutter')),
    body: Column(
        children: <Widget>[
        Text("CrossAxisAlignment.start",style:TextStyle(
            color: Colors.blueAccent,
            fontSize: 18
        )),
        Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
            Icon(Icons.star,color: Colors.yellow, size: 30),
            Icon(Icons.star,color: Colors.yellow, size: 60),
            Icon(Icons.star,color: Colors.yellow, size: 30),
            ],
        ),
        Text("CrossAxisAlignment.center",style:TextStyle(
            color: Colors.blueAccent,
            fontSize: 18
        )),
        Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
            Icon(Icons.star,color: Colors.yellow, size: 30),
            Icon(Icons.star,color: Colors.yellow, size: 60),
            Icon(Icons.star,color: Colors.yellow, size: 30),
            ],
        ),


        Text(" CrossAxisAlignment.end",style:TextStyle(
            color: Colors.blueAccent,
            fontSize: 18
        )),
        Row(
            crossAxisAlignment: CrossAxisAlignment.end,
            children: <Widget>[
            Icon(Icons.star,color: Colors.yellow, size: 30),
            Icon(Icons.star,color: Colors.yellow, size: 60),
            Icon(Icons.star,color: Colors.yellow, size: 30),
            ],
        )
        ],
    ),
),