Flutter入门2Text和Container组件的使用

一、先建立一个主页面

1.首先输入fim，就会自动跳出第一段引用。
2.然后在主函数中runApp(MyApp());

import 'package:flutter/material.dart';

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

3.定义好MyApp的内容
返回的是MaterialApp组件的home和body元素。Home利用Scaffold元素中的appBar定义上划栏的组件。Body里面就是一个新的定义组件。
//自定义组件

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

4.运行结果如下：

今天需要学习的Text组件和Container组件都放在新组件HomeContent中。以后对内容的修改最后都这么做。

二、首先可以看到Center组件中的子组件Container

Container中包括了子组件、height、width、以及decoration组件。分别设置了容器的内容、高度、宽度以及装饰。装饰包括color和border，装饰了容器的背景色为蓝色，边框的颜色为黄色宽度为2.0.

三、Container子组件对应的内容是今天的另一个细节Text组件

下面设置了文本内容、textAlign和style。textAlign设置了文章居中显示。Style设置了文字的大小和间距。

HomeContent全部代码如下

//将center组件重新封装在HomeContent中
class HomeContent extends StatelessWidget {
    
    
  get yellow => null;
  @override
  Widget build(BuildContext context) {
    
    
    // TODO: implement build
    return Center(
        child: Container(
            child: Text('我是一个文本',
            textAlign: TextAlign.center,//文本显示位置
            //overflow: TextOverflow.ellipsis,溢出就是几个点，如果不做溢出设置，就会自动换行
            
            style: TextStyle(
              fontSize: 16.0,
              letterSpacing: 5.0,//间距
             )//字体大小显示
            
            ),
            height: 300.0,
            width: 300.0,
            decoration: BoxDecoration(
                color: Colors.blue,
                border: Border.all(
                  color: Colors.yellow,
                  width: 2.0,
                ) /*边框的颜色*/
                )));
    throw UnimplementedError();
  }
}

运行结果如下

四、Text组件和Container组件

1.TextWidget常用属性

名称	功能
textAlign（TextAlign）	文本对齐（center居中，left左对齐，right右对齐，justfy两端对齐）
textDirection（TextDirection）	文本方向（ltr从左到右，rlt从右到左）
maxLines（init）	文本显示的最大行数
overflow（TextOverflow）	控制文本的溢出效果（clip剪裁，fade渐隐，ellipsis省略号）
TextScaleFactor	字体显示倍率
style（TextStyle）	文字样式设计

TextStyle文字样式设计，主要有

名称	功能
fontSize(double）	字体大小
color(Color,Colors)	字体颜色
fontWeight(FontWeight)	加粗（bold粗体）
fontStyle（FontStyle）	字体样式（italic斜体，normal正常体）
decoration(TextDecoration)	文字装饰（none没有线。lineThrough删除线，overline上划线，underline下划线）
decorationColor(Color,Colors)	文字装饰的颜色
decorationStyle(TextDecorationStyle)	文字装饰线条类型（[dashed,dotted]虚线，double两根线，solid一根线，wavy波浪线）
decorationThickness(double)	文字装饰线条宽度
letterSpacing()	字间距（英文指每个字母之间，如果为负值字母更紧凑。中文指每个字体之间）
backgroundColor(Color,Colors)	字体背景颜色
wordSpacing	字体间距离（英文指每个单词间）
textBaseline	基线
shadows	绘制文字阴影
fontFamily	文字字体"Rock Salt"
height	好像是设置line-height的

2.Container组件

名称	功能
child
height(double)	高度
width	宽度
padding(EdgeInsets)	内边距 fromLTRB(左，上，右，下)
margin	同padding
alignment(Alignment)	child在容器中的对齐方式

transform(Matrix4) | 动画 translationValues rotationZ
decoration(BoxDecoration) | 背景颜色，边框，圆角
decoration样式，主要有

名称	功能
color(Color, Colors)	背景颜色
border(Border)	Border.all同时设置四条边框， Border设置单边框
borderRadius	圆角

总结内容来自于
链接: 组件汇总 · flutter · 看云 (kancloud.cn).
如果记不住对应的用法，只要将鼠标放在对应的方法上即可查看。