刚刚把环境装好的小伙伴一定忍不住想要试一试flutter，让我们一起试一下吧!
以下文章只适用于flutter初学者，大佬可以跳过。如有错误，欢迎指正。
首先我们在新页面中弄一个导航栏
class MyApp extends StatelessWidget{
@override
Widget build(BuildContextcontext){
return MaterialApp( //导航栏
home:Scaffold(
appBar: AppBar( //顶部导航
title: Text('flutter'),
centerTitle: true,
),
body: HomeContent(), //内容
),
theme: ThemeData(
primarySwatch: Colors.yellow //主题颜色
),
color: Colors.blue,
);
}
}
然后就可以在页面里编写文字啦，当然，不弄导航栏也是可以的，在这里顺便展示一下导航栏怎么弄而已。
class HomeContent extends StatelessWidget{
@override
Widget build(BuildContextcontext) {
// TODO: implement build
return Center(
child: Container( //Container 类似一个div
child: Text('这是一个文本',
textAlign: TextAlign.center, //文本对齐方式
overflow: TextOverflow.ellipsis,//表示文本溢出后有....(换成其他就其他效果)
maxLines: 1,
textScaleFactor: 2, //框内文本字体大小
style: TextStyle(
fontSize: 16.0,
color: Colors.blue, //框内文本颜色
fontWeight: FontWeight.w100 ,//字体粗细
fontStyle: FontStyle.italic,//字体倾斜(还有其他)
decoration: TextDecoration.lineThrough , //一条横线穿过文本
decorationColor: Colors.white , //穿过横线的颜色
decorationStyle: TextDecorationStyle.dashed ,//穿过文本横线的形状，虚线、实线等等
letterSpacing: 5.0 //字间距
)
),
height: 300.0,
width: 300.0,
decoration: BoxDecoration(
color: Colors.yellow, //div背景颜色
border: Border.all( //边框
color: Colors.blue, //边框颜色
width: 2.0,
),
borderRadius: BorderRadius.all( //圆角边框，有点不同，看清楚
//Radius.circular(150.0),圆形
Radius.circular(10.0),
)
),
padding: EdgeInsets.all(20),//内边距
//padding: EdgeInsets.fromLTRB(left, top, right, bottom),内边距的上下左右
margin: EdgeInsets.all(20),//外边距，用法跟padding一样
//transform: Matrix4.translationValues(1, 2, 3)//文字旋转
//transform: Matrix4.rotationY(3), //div旋转
alignment: Alignment.bottomCenter,// 框内文字位置
)
);
}
}
以上就是关于文字组件的部分内容，个人认为已经十分清楚了，还有不懂的欢迎提问，觉得有错的欢迎指正。
网友评论