Flutter常用布局Basic widgets

Flutter提供了强大的基本控件，我们现在学习最常用的空间。

常用控件一： Text

我们看到这个控件的名字就知道，这个控件是用来显示文本的，他有各种文本属性供我们设置，比如字体颜色、大小、样式等等，

屏幕快照 2019-05-31 18.45.15.png

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'text小部件',
      //去掉右上角的debug标签
      debugShowCheckedModeBanner: false,
      home: Center(
        child: Text(
          '我是text小部件',
          //设置文本显示是样式，日字体大小为18，字体没有装饰，字体颜色为白色
          style: TextStyle(
              fontSize: 18,
              decoration: TextDecoration.none,
              color: Colors.white),
        ),
      ),
    );
  }
}

常用控件2：Row、Column

大家看单词就知道，行和列，在flutter中，我们就用这两个进行布局的，垂直布局和水平布局，两者也可以相互嵌套。

Screenshot_1559299905.png

class MyRow extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Row(
        children: <Widget>[
          Text(
            '老一',
            style: TextStyle(fontSize: 16, decoration: TextDecoration.none),
          ),
          Text(
            '老二',
            style: TextStyle(fontSize: 16, decoration: TextDecoration.none),
          ),
          Text(
            '老三',
            style: TextStyle(fontSize: 16, decoration: TextDecoration.none),
          ),
          Text(
            '老四',
            style: TextStyle(fontSize: 16, decoration: TextDecoration.none),
          ),
        ],
      ),
    );
  }
}

Screenshot_1559300100.png

class MyColumn extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Column(
        children: <Widget>[
          Text(
            '老一',
            style: TextStyle(fontSize: 16, decoration: TextDecoration.none),
          ),
          Text(
            '老二',
            style: TextStyle(fontSize: 16, decoration: TextDecoration.none),
          ),
          Text(
            '老三',
            style: TextStyle(fontSize: 16, decoration: TextDecoration.none),
          ),
          Text(
            '老四',
            style: TextStyle(fontSize: 16, decoration: TextDecoration.none),
          ),
        ],
      ),
    );
  }
}

常用控件3：Stack

这个布局有意思，类似于帧布局，就是布局直接相互叠加的，按照绘制顺序堆叠小部件，在stack子项上使用定位小部件来设置子项的位置，子项位置是相对顶部stack的。

Screenshot_1559300248.png

class MyStack extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      padding: EdgeInsets.all(30),
      child: Stack(
        children: <Widget>[
          //1
          Container(
            color: Colors.amber,
          ),

          //2
          Container(
            margin: EdgeInsets.all(20),
            color: Colors.blueAccent,
          ),
          //3
          Container(
            margin: EdgeInsets.all(30),
            color: Colors.red,
            //3.1
            child: Container(//这个是相对于他自己的父部件的位置的
              margin: EdgeInsets.all(30),
              color: Colors.black,
            ),
          ),
        ],
      ),
    );
  }
}

常用控件4：Container 容器小部件

容器小部件允许创建可视元素。容器可以使用BoxDecoration进行装饰，例如背景、边框或阴影，还可以设置边距，填充和大小限制。另外可以使用矩阵在三维空间中变化容器。

Screenshot_1559300352.png

class MyContainer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        //Container 里面包含了一行 两列的布局
      home: Container(
        color: Colors.white,
        padding: EdgeInsets.all(30),
        child: Row(
          children: <Widget>[
            Column(
              children: <Widget>[
                Text(
                  '老一',
                  style:
                      TextStyle(fontSize: 20, decoration: TextDecoration.none),
                ),
                Text(
                  '老二',
                  style:
                      TextStyle(fontSize: 20, decoration: TextDecoration.none),
                ),
                Text(
                  '老三',
                  style:
                      TextStyle(fontSize: 20, decoration: TextDecoration.none),
                ),
                Text(
                  '老四',
                  style:
                      TextStyle(fontSize: 20, decoration: TextDecoration.none),
                ),
              ],
            ),
            Column(
              children: <Widget>[
                Text(
                  '老一',
                  style:
                      TextStyle(fontSize: 16, decoration: TextDecoration.none),
                ),
                Text(
                  '老二',
                  style:
                      TextStyle(fontSize: 16, decoration: TextDecoration.none),
                ),
                Text(
                  '老三',
                  style:
                      TextStyle(fontSize: 16, decoration: TextDecoration.none),
                ),
                Text(
                  '老四',
                  style:
                      TextStyle(fontSize: 16, decoration: TextDecoration.none),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

常用控件5：Expanded

这个控件会占用所有的剩余空间。

Screenshot_1559300530.png

class MyExpanded extends StatelessWidget{

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      child: Row(
        children: <Widget>[
          Container(
            width: 50,
            height:30 ,
            color: Colors.red,
          ),

          //Expanded小部件的特点是，占据剩下的所有空间
          Expanded(child: Container(color: Colors.blueAccent,))
        ],
      ),
    );
  }
}