Flutter学习：Container 组件和Text组件详解

一.复习上一节

flutter项目的基本结构

import 'package:flutter/material.dart';

void main() {
  runApp(MyContent());
}

class MyContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            appBar: AppBar(title: Text("标题")),
            body: Center(child: Text("内容"))));
  }
}

二. Container组件

class MyBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
        child: Container(
            child: Center(
              child: Text("内容"),
            ),
            width: 300.0,
            height: 300.0,
            decoration: BoxDecoration(
                color: Colors.yellow,
                border: Border.all(color: Colors.red, width: 2.0)  borderRadius: BorderRadius.all(Radius.circular(30))),
            padding: EdgeInsets.fromLTRB(30, 30, 30, 30),
            margin: EdgeInsets.all(30),
            alignment: Alignment.bottomCenter,
            transform: Matrix4.rotationX(20.0)));
  }
}

Container：是一个容器组件，可以指定child、height、width、decoration(装饰 BoxDecoration)参数

• decoration：设计容器样式 BoxDecoration

BoxDecoration：装饰容器，可以指定color(背景色)、border（边框 ）、borderRadius（圆角弧度）参数

• alignment ：内容在容器中的对齐位置
• magin ：容器与外界其他组件的距离
• padding：容器的内边距
• transform：容器旋转缩放等效果

属性中 XXXGeometry 可以直接写XXX 如：EdgeInsetsGeometry、BorderRadiusGeometry

• 效果图：

image.png

三. Text组件

 Text(
              "大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好",
              textAlign: TextAlign.center,
              textDirection: TextDirection.ltr,
              overflow: TextOverflow.ellipsis,
              maxLines: 1,
              textScaleFactor: 2,
              style: TextStyle(
                  fontSize: 20.0,
                  color: Colors.cyanAccent,
                  fontStyle: FontStyle.italic,
                  fontWeight: FontWeight.w100,
                  wordSpacing: 2.0,
                  decoration: TextDecoration.underline,
                  decorationColor: Colors.red,
                  decorationThickness: 3,
                  decorationStyle: TextDecorationStyle.solid),
            ),

• textAlign：文本对齐方式（center，left，right，justfy两端对齐）

• textDirecation：文本对齐方式（ltr从左至右 ，rtl从右至左）

• overflow ：文本超出屏幕后的处理方式（clip裁剪，fade渐隐，ellipse省略号）

• letterSpacing：字母间隙（负值会让字母变得更紧密）

• textScaleFactor:字体缩放几倍

• style ：TextStyle：中的属性

• fontSize：字号
• color：字体颜色
• fontWeight:字体的粗细（bold：粗体，normal 正常体）
• fontStyle：文字样式（italic斜体，normal正常）
• decoration：文字装饰线（none没有线，lineThrough删除> -线，overline上划线，underline下划线）
• decorationColor:装饰线的颜色
• decorationStyle：装饰线风格
• wordSpacing：单词间距（负值会让单词变得更紧密）

效果图

image.png