Flutter 基础.pdf

Text

  1. const Text(
  2.   '的点点滴滴多多多多多多多多多多多多多多多多多多多多多多多多',
  3.   textDirection: TextDirection.ltr,
  4.   style: TextStyle(
  5.     color: Colors.blue,
  6.     fontWeight: FontWeight.w600,
  7.     fontStyle: FontStyle.italic,
  8.   ),
  9.   textAlign: TextAlign.right,
  10.   overflow: TextOverflow.ellipsis,
  11.   maxLines: 2,
  12. )
  14.   //富文本
  15. RichText( 
  16.   text: const TextSpan(
  17.     text: ('SDF'),
  18.     style: TextStyle(color: Colors.red),
  19.     children: [
  20.       TextSpan(
  21.         text: 'sdf',
  22.         style: TextStyle(color: Colors.blue),
  23.       ),
  24.     ]),
  25. )

谷歌字体

material ICON

Color

  1. Color.fromRGBO(0, 0, 0, .1) //等价于rgba(0, 0, 0, .1)
  2. Color.fromARGB(900, 900, 200, 0)
  3. Color(0xFF00FF00)

Container

padding(margin)

  • EdgeInsets all、fromLTRB()、only()

decoration

  • boxDecoration(边框、圆角、渐变、阴影、背景色、背景图片)

alignment
transform

  • Matri(平移-translate、旋转-rotate、scale缩放、斜切skew)

border(如果要设置radius,边框样式上下左右必须一样)

  1. border: Border.all(
  2.   width: 10.0,
  3.   color: Colors.red,
  4. ),
  1. class MyWidget extends StatelessWidget {
  2.   const MyWidget({Key? key}) : super(key: key);
  3.   @override
  4.   Widget build(BuildContext context) {
  5.     return Container(
  6.       width: double.infinity,
  7.       padding: const EdgeInsets.all(3),
  8.       decoration: const BoxDecoration(
  9.         border: Border(
  10.           top: BorderSide(color: Colors.red, width: 20), //2px solid red
  11.           left: BorderSide(color: Colors.red, width: 20), //2px solid red
  12.           right: BorderSide(color: Colors.red, width: 20), //2px solid red
  13.           bottom: BorderSide(color: Colors.red, width: 20), //2px solid red
  14.         ),
  15.         // borderRadius: BorderRadius.all(
  16.         //   Radius.circular(40), //border-radius:100%  //上面边框必须样式一样，否则失败!!!
  17.         // ),
  18.         borderRadius: BorderRadius.only(
  19.           topLeft: Radius.circular(
  20.               20.0), //!!!上面边框必须样式一样，否则失败 // border-radius:20px 0 0 0;
  21.         ),
  22.       ), //width:100%
  23.       child: const Text('322'),
  24.     );
  25.   }
  26. }

background

  1. color: Colors.red[100] //background:red
  2. //背景渐变
  3. gradient: const LinearGradient(
  4.   colors: [Colors.red, Colors.green],
  5. ),

对齐方向

image.png

transform

  1. //transform: rotateZ(8deg);
  2. transform: Matrix4.rotationZ(0.1)
  3. //transform: translate(100px, 100px);
  4. transform: Matrix4.translationValues(100, 100, 0)