flutter中的widget属性总结

[ Flutter ] 

1
2
3
4
5

MeterialApp( // app根元素
    title:  // Text()实例,app标题
    home: // widget实例,页面内的根元素
    theme: ThemeData() // 定义全局主主题样式
)

1
2
3
4

Text( // 文字元素
    str, // 文字内容
    style: TextStyle() // 定义文字样式
)

1
2
3
4
5
6
7
8

ThemeData( // 定义主题样式
    fontFamily: // 定义主题所用字体
    color: // 定义文字颜色
    height: // 定义行高
    fontSize: // 定义字号
    fontWeight: // 定义字体加粗样式
    fontStyle: // 定义字体
)

1
2
3
4
5
6

Scaffold(  // 页面根元素
    appBar: AppBar() // 定义页面顶部标题栏
    title: // 页面标题
    body:     // 页面内容
    floatingActionButton: FloatingActionButton() // 固定定位在页面右下角的元素
)

1
2
3

AppBar( // 定义页面顶部标题栏
    title: Text() // 定义标题栏文字
)

1
2
3
4

FloatingActionButton( // 固定定位在页面右下角的元素
    child: // 子元素
    onPressed:fn // 点击事件
)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

Container(  // 容器,相当于div元素,默认是IE盒子模型
    padding: // 内填充
    child:    // 子元素
    width: // 宽度
    height: // 高度
    decoration: BoxDecoration(  // 定义盒子的样式
        color: // 背景颜色
        borderRadius: BorderRadius.circular(100) 
        // 圆角,圆角尺寸由BorderRadius.circular(value)设置
    )
)

1
2
3
4

AnimatedContainer( // 带有过渡效果的div,继承Container中的属性
    duration: Duration(seconds:1) //  定义过渡所需要的时间
    curve: Curves.fastOutSowIn // 定义过渡的速度,值从Curves中获取常量
)

1
2
3
4
5
6
7
8
9

Image(
    image: // AssetImage/NetworkImage等图片资源
    width: // 宽度
    height: // 高度
    color: // 混合色值
    colorBendMode: // 混合模式
    aiginment: Alignment.center // 对其模式
    repeat: ImageRepeat  // 重复模式
)