Flutter常用控件

1 Expanded用于填充Row或者Column

new Expanded(child: title)

2 和上一个类似吧,也是在Row或者Column里面用,注意flex属性

new Flexible(
            flex: 1,
            child: new RaisedButton(
              onPressed: () {
                print('点击黄色按钮事件');
              },
              color: const Color(0xfff1c232),
              child: new Text('黄色按钮'),
            ),
          ),

效果图

image.png
image.png

3 Stack 堆叠,类似于安卓的帧布局,FrameLayout

new Stack(
         children: <Widget>[
           new Image.network('http://img2.cxtuku.com/00/13/12/s97783873391.jpg'),
           new Positioned(
             left: 35.0,
             right: 35.0,
             top: 45.0,
             child: new Text(
               'Whatever is worth doing is worth doing well. ๑•ิ.•ั๑',
               style: new TextStyle(
                 fontSize: 20.0,
                 fontFamily: 'serif',
               ),
             ),
           ),
         ]
       ),

image.png

4 Align控件即对齐控件，能将子控件所指定方式对齐，并根据子控件的大小调整自己的大小。

new Align(
            alignment: new FractionalOffset(0.0, 0.0),
            child: new Image.network('http://up.qqjia.com/z/25/tu32710_10.jpg'),
          ),
new Align(
            alignment: FractionalOffset.bottomRight,
            child: new Image.network('http://up.qqjia.com/z/25/tu32710_11.jpg'),
          ),

5 Padding控件即填充控件，能给子控件插入给定的填充。

new Padding(
        padding: const EdgeInsets.all(50.0),
        child: new Image.network('http://up.qqjia.com/z/25/tu32710_4.jpg'),
      ),

6
SizedBox控件能强制子控件具有特定宽度、高度或两者都有
AspectRatio控件能强制子小部件的宽度和高度具有给定的宽高比，以宽度与高度的比例表示。

 new SizedBox(
        width: 250.0,
        height: 250.0,
        child: new Container(
          height: 100.0,
          width: 100.0,
          decoration: new BoxDecoration(
            color: Colors.lightBlueAccent[100],
          ),
        ),
      ),


new AspectRatio(
        aspectRatio: 3.0 / 2.0,
        child: new Container(
          decoration: new BoxDecoration(
            color: Colors.lightBlueAccent[100],
          ),
        ),
      ),

7 DecoratedBox控件会在子控件绘制之前或之后绘制一个装饰。

new DecoratedBox(
        decoration: new BoxDecoration(
            gradient: new LinearGradient(
              begin: const FractionalOffset(0.0, 0.0),
              end: const FractionalOffset(1.0, 1.0),
              colors: <Color>[const Color(0xffff2cc), const Color(0xffff6eb4)],
            )
        ),
        child: new Container(
          width: 250.0,
          height: 250.0,
        ),
      ),

8 Opacity控件能调整子控件的不透明度，使子控件部分透明，不透明度的量从0.0到1.1之间，0.0表示完全透明，1.1表示完全不透明。

 new Opacity(
          opacity: 0.1,
          child: new Container(
            width: 250.0,
            height: 100.0,
            decoration: new BoxDecoration(
              backgroundColor: const Color(0xff000000),
            ),
          ),
        ),

9 PopupMenuButton控件即弹出菜单控件，点击控件会出现菜单。

new PopupMenuButton<String>(
                  onSelected: (String value) {
                    setState(() {
                      _bodyStr = value;
                    });
                  },
                  itemBuilder: (BuildContext context) => <PopupMenuItem<String>>[
                    new PopupMenuItem<String>(
                        value: '选项一的值',
                        child: new Text('选项一')
                    ),
                    new PopupMenuItem<String>(
                        value: '选项二的值',
                        child: new Text('选项二')
                    )
                  ]
              )

10 进度条LinearProgressIndicator控件是质感设计中的线性进度指示器

 new LinearProgressIndicator(value: currentEmergy / maximumEmergy),