Flutter Container组件、Text组件详解
目录
1. Container容器组件
1.1 Container使用
1.2 Container alignment使用
1.3 Container border边框使用
1.4 Container borderRadius圆角的使用
1.5 Container boxShadow阴影的使用
1.6 Container gradient背景颜色渐变
1.7 Container gradient RadialGradient 背景颜色渐变
1.8 Container 实现圆角按钮
1.9 Container transform的使用
2. Text组件详解
2.1 TextStyle组件详解
2.2 Text textAlign/maxLines/overflow 的使用
2.2 Text 字符间距/倾斜字体的使用
1. Container容器组件
1.1 Container使用
import 'package:flutter/material.dart';main() {runApp(MaterialApp(home: Scaffold(appBar: AppBar(title: Text("Home")), body: MyApp()),),);
}class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return Center(child: Container(alignment: Alignment.topLeft, //配置Container容器内的方位width: 100,height: 100,decoration: BoxDecoration(color: Colors.yellow),child: Text("你好", style: TextStyle(color: Colors.blue)),),);}
}
1.2 Container alignment使用
class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return Center(child: Container(alignment: Alignment.center, //配置Container容器内的方位width: 100,height: 100,decoration: BoxDecoration(color: Colors.yellow),child: Text("你好", style: TextStyle(color: Colors.blue)),),);}
}
1.3 Container border边框使用
import 'package:flutter/material.dart';main() {runApp(MaterialApp(home: Scaffold(appBar: AppBar(title: Text("Home")), body: MyApp()),),);
}class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return Center(child: Container(alignment: Alignment.center,//配置Container容器内的方位width: 100,height: 100,decoration: BoxDecoration(color: Colors.yellow,border: Border.all(color: Colors.red), //边框),child: Text("你好", style: TextStyle(color: Colors.blue)),),);}
}
1.4 Container borderRadius圆角的使用
class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return Center(child: Container(alignment: Alignment.center,//配置Container容器内的方位width: 100,height: 100,decoration: BoxDecoration(color: Colors.yellow,border: Border.all(color: Colors.red),//边框borderRadius: BorderRadius.circular(10),//配置圆角),child: Text("你好", style: TextStyle(color: Colors.blue)),),);}
}
1.5 Container boxShadow阴影的使用
class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return Center(child: Container(alignment: Alignment.center,//配置Container容器内的方位width: 100,height: 100,decoration: BoxDecoration(color: Colors.yellow,border: Border.all(color: Colors.red),//边框borderRadius: BorderRadius.circular(10),//配置圆角boxShadow:[ //阴影BoxShadow(color: Colors.black,blurRadius: 10)]),child: Text("你好", style: TextStyle(color: Colors.blue)),),);}
}
1.6 Container gradient背景颜色渐变
import 'package:flutter/material.dart';main() {runApp(MaterialApp(home: Scaffold(appBar: AppBar(title: Text("Home")), body: MyApp()),),);
}class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return Center(child: Container(alignment: Alignment.center,//配置Container容器内的方位width: 100,height: 100,decoration: BoxDecoration(color: Colors.yellow,border: Border.all(color: Colors.red),//边框borderRadius: BorderRadius.circular(10),//配置圆角boxShadow:[ //阴影BoxShadow(color: Colors.black,blurRadius: 2)],gradient:LinearGradient(colors: [Colors.red,Colors.yellow,]) //背景颜色渐变 LinearGradient=线性渐变 RadialGradient= 径性渐变),child: Text("你好", style: TextStyle(color: Colors.blue)),),);}
}
1.7 Container gradient RadialGradient 背景颜色渐变
1.8 Container 实现圆角按钮
import 'package:flutter/material.dart';main() {runApp(MaterialApp(home: Scaffold(appBar: AppBar(title: Text("Home")),body: Column(children: [MyApp(), MyButton()]),),),);
}class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return Center(child: Container(alignment: Alignment.center,//配置Container容器内的方位width: 100,height: 100,decoration: BoxDecoration(color: Colors.yellow,border: Border.all(color: Colors.red),//边框borderRadius: BorderRadius.circular(10),//配置圆角boxShadow: [//阴影BoxShadow(color: Colors.black, blurRadius: 2),],gradient: LinearGradient(colors: [Colors.red, Colors.yellow],), //背景颜色渐变 LinearGradient=线性渐变 RadialGradient= 径性渐变),child: Text("你好", style: TextStyle(color: Colors.blue)),),);}
}class MyButton extends StatelessWidget {@overrideWidget build(BuildContext context) {return Container(alignment: Alignment.center,// margin: EdgeInsets.all(10), //边距// margin: EdgeInsets.all(10), //边距margin: EdgeInsets.fromLTRB(0,20,0,0), //边距height: 48,width: 150,decoration: BoxDecoration(color: Colors.blue,borderRadius: BorderRadius.circular(30),),child: Text("按钮", style: TextStyle(color: Colors.white)),);}
}
1.9 Container transform的使用
class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return Center(child: Container(alignment: Alignment.center,//配置Container容器内的方位width: 100,height: 100,// transform: Matrix4.translationValues(10, 0, 0),//位移// transform: Matrix4.rotationZ(1),//选择transform: Matrix4.skewY(3),//倾斜decoration: BoxDecoration(color: Colors.yellow,border: Border.all(color: Colors.red),//边框borderRadius: BorderRadius.circular(10),//配置圆角boxShadow: [//阴影BoxShadow(color: Colors.black, blurRadius: 2),],gradient: LinearGradient(colors: [Colors.red, Colors.yellow],), //背景颜色渐变 LinearGradient=线性渐变 RadialGradient= 径性渐变),child: Text("你好", style: TextStyle(color: Colors.blue)),),);}
}
2. Text组件详解
2.1 TextStyle组件详解
2.2 Text textAlign/maxLines/overflow 的使用
child: Text("HowHowHowHowHowHowHowHowHowHowHowHowHowHowHowHow",textAlign: TextAlign.center,maxLines: 1,overflow: TextOverflow.ellipsis,)
2.2 Text 字符间距/倾斜字体的使用
child: Text("HowHowHowHowHowHowHowHowHowHowHowHowHowHowHowHow",textAlign: TextAlign.center,maxLines: 1,overflow: TextOverflow.ellipsis,style: TextStyle(fontSize: 20,fontWeight: FontWeight.w800,//字体大小color: Colors.red,fontStyle: FontStyle.italic,//倾斜字体letterSpacing: 7 //字符间距),),
2.3 Text 底部下划线/底部虚线的使用
child: Text("HowHowHowHowHowHowHowHowHowHowHowHowHowHowHowHow",textAlign: TextAlign.center,maxLines: 1,overflow: TextOverflow.ellipsis,style: TextStyle(fontSize: 20,fontWeight: FontWeight.w800,//字体大小color: Colors.red,fontStyle: FontStyle.italic,//倾斜字体letterSpacing: 1,//字符间距decoration: TextDecoration.underline,decorationColor: Colors.black //底部下划线,decorationStyle: TextDecorationStyle.dashed //底部虚线),),