首先记住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])//边框设置
)
),
),
),
);
}
}