Flutter学习咒语:"Flutter一切皆组件！"
新语言第一个程序当然是'Hello world'
看一下最基础的HelloWold代码
import 'package:flutter/material.dart';
void main () => runApp(MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context ){
return MaterialApp(
title:'Text widget',
home:Scaffold(
body:Center(
child:Text('Hello World')
),
),
);
}
}
运行一下
Hello world
代码中使用了最简单的组件Text，简单的说一下它的属性
TextAlign属性
TextAlign属性就是文本的对齐方式，它的属性值有如下几个
- center: 文本以居中形式对齐,这个也算比较常用的了。
- left:左对齐，经常使用，让文本居左进行对齐，效果和start一样。
- right :右对齐，使用频率也不算高。
- start:以开始位置进行对齐，类似于左对齐。
- end: 以为本结尾处进行对齐，不常用。有点类似右对齐.
总结起来，也就算三个对齐方式，left(左对齐)、center（居中对齐）、right（右对齐）。我们来看一下具体代码：
import 'package:flutter/material.dart';
void main () => runApp(MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context ){
return MaterialApp(
title:'Text widget',
home:Scaffold(
body:Center(
child:Text('Flutter一切皆组件，一步一步学习，风一样的code，Flutter一切皆组件，Flutter一切皆组件',textAlign: TextAlign.center,)
),
),
);
}
}
运行一下
textAlign
maxLines属性
最多显示几行
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Text widget',
home: Scaffold(
body: Center(
child: Text(
'Flutter一切皆组件，一步一步学习，风一样的code，Flutter一切皆组件，Flutter一切皆组件',
textAlign: TextAlign.center,
maxLines: 1,
)),
),
);
}
}
运行一下
maxLines
overflow属性
设置最多显示几行后，多余的部分显示省略号
overflow属性是用来设置文本溢出时，如何处理,它有下面几个常用的值供我们选择。
- clip：直接切断，剩下的文字就没有了，感觉不太友好，体验性不好。
- ellipsis:在后边显示省略号，体验性较好，这个在工作中经常使用。
- fade: 溢出的部分会进行一个渐变消失的效果，当然是上线的渐变，不是左右的
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Text widget',
home: Scaffold(
body: Center(
child: Text(
'Flutter一切皆组件，一步一步学习，风一样的code，Flutter一切皆组件，Flutter一切皆组件',
textAlign: TextAlign.center,
maxLines: 1,
overflow: TextOverflow.ellipsis,
)),
),
);
}
}
control+s一下，Flutter是可以reload的
overflow
TextStyle属性
TextStyle用于指定文本显示的样式如颜色、字体、粗细、背景等
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Text widget',
home: Scaffold(
body: Center(
child: Text(
'Flutter一切皆组件，一步一步学习，风一样的code，Flutter一切皆组件，Flutter一切皆组件',
textAlign: TextAlign.center,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(
color: Colors.blue,
fontSize: 18.0,
height: 1.2,
fontFamily: "Courier",
background: new Paint()..color = Colors.yellow,
decoration: TextDecoration.underline,
decorationStyle: TextDecorationStyle.dashed),
)),
),
);
}
}
- height：该属性用于指定行高，但它并不是一个绝对值，而是一个因子，具体的行高等于fontSize*height。
- fontFamily ：由于不同平台默认支持的字体集不同，所以在手动指定字体时一定要先在不同平台测试一下。
- fontSize：该属性和Text的textScaleFactor都用于控制字体大小。但是有两个主要区别：fontSize可以精确指定字体大小，而textScaleFactor只能通过缩放比例来控制。
- textScaleFactor主要是用于系统字体大小设置改变时对Flutter应用字体进行全局调整，而fontSize通常用于单个文本，字体大小不会跟随系统字体大小变化。
- decoration：设置下划线
-
decorationStyle: 设置下划线的样式
保存一下，看下效果图
TextStyle
TextSpan属性
在上面的例子中，Text的所有文本内容只能按同一种样式，如果我们需要对一个Text内容的不同部分按照不同的样式显示，这时就可以使用TextSpan，它代表文本的一个“片段”。
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Text widget',
home: Scaffold(
body: Center(
child: Text.rich(TextSpan(children: [
TextSpan(
text: 'Flutter一切皆组件，',
),
TextSpan(
text: "一步一步学习，风一样的code，Flutter一切皆组件，Flutter一切皆组件",
style: TextStyle(
color: Colors.blue,
fontSize: 18.0,
height: 1.2,
fontFamily: "Courier",
background: new Paint()..color = Colors.yellow,
decoration: TextDecoration.underline,
decorationStyle: TextDecorationStyle.dashed),
)
]))),
),
);
}
}
保存一下，看下效果图
TextSpan
DefaultTextStyle属性
在widget树中，文本的样式默认是可以被继承的，因此，如果在widget树的某一个节点处设置一个默认的文本样式，那么该节点的子树中所有文本都会默认使用这个样式，而DefaultTextStyle正是用于设置默认文本样式的。看例子：
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Text widget',
home: Scaffold(
body: Center(
child: DefaultTextStyle(
//设置默认的样式
style: TextStyle(
color: Colors.blue,
fontSize: 20.0,
),
textAlign: TextAlign.center,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text('Flutter一切皆组件'),
Text('一步一步学习，风一样的code'),
Text(
'Flutter一切皆组件，一步一步学习，风一样的code，Flutter一切皆组件，Flutter一切皆组件',
textAlign: TextAlign.center,
maxLines: 1,
overflow: TextOverflow.ellipsis,
//使用自己的样式
style: TextStyle(
color: Colors.blue,
fontSize: 18.0,
height: 1.2,
fontFamily: "Courier",
background: new Paint()..color = Colors.yellow,
decoration: TextDecoration.underline,
decorationStyle: TextDecorationStyle.dashed),
)
],
),
)),
),
);
}
}
保存下看效果：
DefaultTextStyle
最近正在进行Flutter和原生的混合开发，有时间会更新Flutter相关的文章，有兴趣的可以交流下～