• Container详解


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

    padding和margin

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

    • 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,  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,  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,  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,  1),
                    borderRadius: BorderRadius.all(Radius.circular(20))),
                child: Text(
                "确定",
                style: TextStyle(color: Colors.red),
                ),
            ),
            ],
        ),
    )),
    

    width和height

    widthheight指定宽高,如果不指定则为子widget的宽高。如果想要完全撑满父容器,可以将widthheight设置为double.infinity

    decoration

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

    • image: DecorationImage设置一张图片作为背景。
    • border: Border设置边界。
    • borderRadius: BorderRadius设置边界圆角。当shapeBoxShape.circle设置borderRadius将不起作用
    • shape: BoxShape设置形状。
    • gradient设置渐变。可选值包括三种类型的渐变LinearGradientRadialGradientSweepGradient
    Scaffold(
        appBar: AppBar(title: Text('BorderRadius')),
        body: Center(
            child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
                Container(
                height: 200,
                 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,  3),
                    //设置阴影
                    boxShadow: const [
                        BoxShadow(blurRadius: 10),
                    ],
                    //设置边界圆角
                    borderRadius: BorderRadius.all(Radius.circular(18))),
                ),
                Container(
                height: 200,
                 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),
                ],
            )
            ],
        ),
    ),
    

    参考

  • 相关阅读:
    团队选题报告
    第二次结对作业
    高级软件工程团队第一次作业
    第一次结队作业
    高级软件工程第二次作业
    高级软件工程第一次作业
    洛谷 题解 2165 [AHOI2009]飞行棋
    洛谷 题解 P1684 考验
    洛谷 题解 P4613 【[COCI2017-2018#5] Olivander】
    洛谷 题解 P5534 【【XR-3】等差数列】
  • 原文地址:https://www.cnblogs.com/malinkang/p/10839901.html
Copyright © 2020-2023  润新知