flutter学习二 基本结构与基本组件

main.dart

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Dart'),
        ),
        body: new Center(
          child: new Text('welcome to flutter')
        ),
      ),
    );
  }
}

Flutter Text 组件

名称 功能
textAlign 文本对齐方式(center 居中,left 左 对齐,right 右对齐,justfy 两端对齐)
textDirection 文本方向(ltr 从左至右,rtl 从右至 左)
overflow 文字超出屏幕之后的处理方式(clip 裁剪,fade 渐隐,ellipsis 省略号)
textScaleFactor 字体显示倍率
maxLines 文字显示最大行数
style 字体的样式设置

下面是 TextStyle 的参数 :

名称 功能
decoration 文字装饰线(none 没有线,lineThrough 删 除线,overline 上划线,underline 下划线)
decorationColor 文字装饰线颜色
decorationStyle 文字装饰线风格([dashed,dotted]虚线, double 两根线,solid 一根实线,wavy 波浪 线)
wordSpacing 单词间隙(如果是负值,会让单词变得更紧 凑
letterSpacing 字母间隙(如果是负值,会让字母变得更紧 凑)
fontStyle 文字样式(italic 斜体,normal 正常体)
fontSize 文字大小
color 文字颜色
fontWeight 字体粗细(bold 粗体,normal 正常体)

Flutter Container 组件

名称 功能
alignment topCenter:顶部居中对齐 topLeft:顶部左对齐 topRight:顶部右对齐 center:水平垂直居中对齐 centerLeft:垂直居中水平居左对齐 centerRight:垂直居中水平居右对齐 bottomCenter 底部居中对齐 bottomLeft:底部居左对齐 bottomRight:底部居右对齐
decoration decoration: BoxDecoration( color: Colors.blue, border: Border.all( color: Colors.red, width: 2.0, ),borderRadius: BorderRadius.all( Radius.circular(8.0) ) )
margin margin 属性是表示 Container 与外部其他 组件的距离。 EdgeInsets.all(20.0),
padding padding 就 是 Container 的 内 边 距 , 指 Container 边缘与 Child 之间的距离 padding: EdgeInsets.all(10.0)
transform 让 Container 容易进行一些旋转之类的transform: Matrix4.rotationZ(0.2)
height 容器高度
width 容器宽度
child 容器子元素

更多参数 https://api.flutter.dev/flutter/widgets/Container-class.html

你可能感兴趣的:(Flutter)