Flutter文档：常用组件基础属性及其方法记录

官方文档用法也比较清楚，VScode编辑器也很给力。以Container组件为例：

Flutter基本结构

import 'package:flutter/material.dart';
void main () => runApp(MyApp());

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context ){
      return MaterialApp(
        title:'Base widget',
        home:Scaffold(
          body:Center(
            child:Text('Base wedget!')
          ),
        ),
      );
  }
}

Scaffold

Material Design布局结构的基本实现

new Scaffold(
  appBar: AppBar(
    title: Text('Sample Code'),
  ),
  body: Center(
    child: Text('bodys.'),
  ),
  // 内容的背景颜色
  backgroundColor:Colors.white,
  // 界面的主要功能按钮
  floatingActionButton: FloatingActionButton(
    tooltip: 'Increment Counter',
    child: Icon(Icons.add),
  ),
  floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
  // 显示在页面底部的导航栏
  bottomNavigationBar: new BottomNavigationBar(
        items: <BottomNavigationBarItem>[
            new BottomNavigationBarItem(
                icon: Icon(Icons.home), title: new Text('首页') ),
            new BottomNavigationBarItem(
                icon: Icon(Icons.shopping_cart), title: new Text('购物车')),
            new BottomNavigationBarItem(
                icon: Icon(Icons.verified_user), title: new Text('我的')),
        ],
        type: BottomNavigationBarType.fixed,
        //默认选中首页
        currentIndex: 0,
        iconSize: 24.0,
        //点击事件
        onTap: (index) {
            
        },
    )
)

Text 文本组件

new Text(
    'This is my first Flutter app!',
    textAlign: TextAlign.left,
    maxLines: 1, // 显示行数
    overflow: TextOverflow.ellipsis,
    textDirection: TextDirection.ltr,
    style:TextStyle(
        fontSize: 35.0,
        color:Color.fromARGB(255, 255,255, 255),
        fontWeight: FontWeight.bold,
        decoration: TextDecoration.underline,
        decorationStyle: TextDecorationStyle.solid
    )
)

Container 容器组件

new Container(
    width: 700.0,
    height: 300.0,
    alignment: Alignment.center,
    // color: Colors.red,
    padding: const EdgeInsets.all(10.0),
    margin: const EdgeInsets.all(10.0),
    decoration: new BoxDecoration(
        gradient: const LinearGradient(
            colors: [Colors.red, Colors.green, Colors.blue]
        ),
        border:Border.all(width:2.0,color:Colors.red),
    ),
    child: new Text('Hello World')
)

Row 水平排列组件

new Row(
    children: <Widget>[
        Expanded(
            child:new Text('line1',textAlign: TextAlign.center,)
        ),
        new RaisedButton(
            color: Colors.blue,
            child: Text("提交",style:TextStyle(fontSize: 20.0,color:Colors.white)),
            onPressed: () => {},
        ),
        Expanded(
            child:new Text('line3',textAlign: TextAlign.center,)
        ),
    ],
)

Column 垂直排列组件

new Column(
    children: <Widget>[
        Expanded(
            flex:1,
            child:new Container(
                alignment: Alignment.center,
                child: new Text('line1',textAlign: TextAlign.center),
            )
        ),
        Expanded(
            child:new RaisedButton(
                color: Colors.blue,
                child: Text("提交",style:TextStyle(fontSize: 20.0,color:Colors.white)),
                onPressed: () => {},
            )
        ),
        Expanded(
            child:new Text('line3',textAlign: TextAlign.center,)
        ),
    ],
)

Image 组件

new Image.network(
    'https://cdn.seosiwei.com/J7GASjpKXbhHExbsCXHBsTDysibM2a5Q.png',
    scale:1.0,
    width:50.0,
    height:50.0,
    fit:BoxFit.none,
    color: Colors.greenAccent,
    colorBlendMode: BlendMode.darken,
    repeat:ImageRepeat.repeat
)

Icon 组件

new Icon(
    Icons.verified_user,
    size:50.0,
    color:Colors.blue,
    semanticLabel:'I am a blue Icon',
    textDirection:TextDirection.rtl
)

RaisedButton 按钮组件

new RaisedButton(
    color: Colors.blue,
    highlightColor: Colors.blue[700],
    colorBrightness: Brightness.dark,
    splashColor: Colors.grey,
    child: Text("提交",style:TextStyle(fontSize: 20.0)),
    shape:RoundedRectangleBorder(borderRadius: BorderRadius.circular(25.0)),
    onPressed: () => {},
)

AppBar 组件

new AppBar(
    leading: Builder(
        builder: (BuildContext context) {
        return IconButton(
            icon: const Icon(Icons.menu),
            onPressed: () { Scaffold.of(context).openDrawer(); },
            tooltip: MaterialLocalizations.of(context).openAppDrawerTooltip,
        );
        },
    ),
    title: Text('My Fancy Dress'),
    actions: <Widget>[
        IconButton(
            icon: Icon(Icons.playlist_play),
            tooltip: 'Air it',
            onPressed: () => {},
        ),
        IconButton(
            icon: Icon(Icons.playlist_add),
            tooltip: 'Restitch it',
            onPressed: () => {},
        ),
        IconButton(
            icon: Icon(Icons.playlist_add_check),
            tooltip: 'Repair it',
            onPressed: () => {},
        ),
    ],
)