Flutter Container组件、Text组件详解

Flutter Text 组件

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

style中TextStyle 的参数

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

Flutter Container 组件

名称	类型	功能
alignment	Alignment	topCenter：顶部居中对齐 topLeft：顶部左对齐 topRight：顶部右对齐 center：水平垂直居中对齐 centerLeft：垂直居中水平居左对齐 centerRight：垂直居中水平居右对齐 bottomCenter 底部居中对齐 bottomLeft：底部居左对齐 bottomRight：底部居右对齐
decoration	BoxDecoration	背景装饰
margin	EdgeInsets	margin 属性是表示 Container 与外部其他组件的距离。
padding	EdgeInsets	padding 就是 Container 的内边距，指Container 边缘与 Child 之间的距离
transform	Matrix4	让 Container 容易进行一些旋转之类的
height	double	容器高度
width	double	容器宽度
child		容器子元素

Demo

import 'package:flutter/material.dart';
import 'package:myapp/demo/demo.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('flutter demo'),
        ),
        body: HomeContent(),
      ),
    );
  }
}

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      // child: Text('hello flutter'),
      child: Container(
        child: Text(
          '这是一段很长的话这是一段很长的话这是一段很长的话这是一段很长的话这是一段很长的话这是一段很长的话',
          textAlign: TextAlign.left,
          textDirection: TextDirection.ltr,
          overflow: TextOverflow.ellipsis,
          //一行文本溢出后以 ... 显示
          maxLines: 1,
          //文本最大显示几行
          textScaleFactor: 1.2,
          //文本显示倍率
          style: TextStyle(
            fontSize: 16.0,
            color: Colors.teal,
            fontWeight: FontWeight.w800, //文本加粗
            fontStyle: FontStyle.italic, //字体样式，italic斜体
            decoration: TextDecoration.lineThrough, //文本中有线穿过的效果
            decorationColor: Colors.white, //穿过的线的颜色
            decorationStyle: TextDecorationStyle.dashed, //穿过的线的样式，dashed为虚线
            letterSpacing: 5.0, //字间距设置
          ),
        ),
        height: 300.0,
        width: 300.0,
        decoration: BoxDecoration(
          color: Colors.tealAccent,
          border: Border.all(
            color: Colors.blue,
            width: 2.0,
          ),
          borderRadius: BorderRadius.all(
            Radius.circular(10),
          ), //边框圆角
        ),
        //padding: EdgeInsets.all(20), //内边距，四边文本与框的距离
        padding: EdgeInsets.fromLTRB(10, 30, 10, 10), //四边距离，左 上 右 下
        margin: EdgeInsets.fromLTRB(10, 30, 10, 10), //内边距

        //transform: Matrix4.translationValues(100, 0, 0), //框的位移
        //transform: Matrix4.rotationZ(0.3), //框的旋转
        //transform: Matrix4.diagonal3Values(1.2, 1, 1),//框的缩放

        //alignment: Alignment.bottomLeft, //居于底部左侧
        alignment: Alignment.topLeft, //居于顶部左侧
      ),
    );
  }
}