Flutter开发（一）——Text Widget以及Container Widget的使用

 首先记住Flutter万物皆组件（Widget）

Text Widget的使用

说一些child里的属性吧

textAlign:文字对齐方式

maxLines:最大行数，溢出部分默认不显示，可以通过overflow设置

overflow:溢出文字显示方式

TextStyle里的属性：

 fontSize：文字大小

color:设置文字颜色，一般用color:color.fromARGB()

decoration: TextDecoration.underline,//下划线，也有其他的

decorationStyle: TextDecorationStyle.solid,//实线

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';//一般要引入这俩文件

void main() => runApp(MyApp());//dart语法，箭头函数，单表达式返回语句简写

class MyApp extends StatelessWidget {//继承这个类是固定的
  @override//覆写父类的Build方法
  Widget build(BuildContext context) {//这里下面写的东西都是组件
    return MaterialApp(//返回这个组件
      title: "Text Widget",
      home: Scaffold(//home为窗口本体，scaffold本意为脚手架，其实就是可以搭建里边的内容
        body: Center(//内容在屏幕中间，Center也是一个组件
          child: Text(//Text组件
            "Your life is up to you.",    
            textAlign: TextAlign.left,//文字对齐方式，还有center和right
            maxLines: 2,//最大行数，超出的部分见下行overflow
            overflow: TextOverflow.ellipsis,//ellipsis意思是溢出的文字会以省略号显示
            style: TextStyle(
              fontSize: 30.0,//字体大小，注意一定要加.0
              color: Color.fromARGB(255, 255, 105, 145),//第一个参数是透明度，后面就是RGB颜色
            ),
          ),
        ),
      ),
    );
  }
}

 

Container Widget的使用
 

刚开始学，没学多少组件

alignment:container里面内容的对齐方式

pading,margin和CSS是一样的

decoration:里边是装饰属性

gradient:渐变，我只会线性渐变

border：装饰边框

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Text Widget",
      home: Scaffold(
        body: Center(
          child: Container(//这个组件里边再套一个child组件
            child: new Text('You life is up to you.',style:TextStyle(fontSize:30.0)),//匿名类？？
            alignment: Alignment.topLeft,//Container里面内容的对齐方式
            width: 500.0,
            height: 400.0,
            padding: const EdgeInsets.fromLTRB(30, 30, 0, 50),//pading和下面的margin与css里边的一样
            margin: const EdgeInsets.fromLTRB(30, 0, 30, 0),//四个参数分别对应左上右下
            decoration: new BoxDecoration(//这个属性进行装饰
              gradient: LinearGradient(//线性渐变
                colors:[Colors.lightBlue,Colors.greenAccent[200],Colors.pink[200]],//方括号里的数字表示透明度，最大300,
              ),
              border: Border.all(width: 2.0,color:Colors.pinkAccent[100])//边框设置
            )
          ),
        ),
      ),
    );
  }
}

 出来是这个样子的