文档目录

Containe 组件详解

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter Demo'),
        ),
        body: Column(
          children: const [
             HomeContent(),
             MyButton()
          ]
        ),
      ),
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
    ),
  );
}

class HomeContent extends StatelessWidget {
  const HomeContent({super.key});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        height: 300.0, // 高度
        width: 300.0, // 宽度
        decoration: BoxDecoration( // 装饰器
          color: Colors.yellow,  // 背景颜色
          border: Border.all( // 边框
            color: Colors.blue, // 边框颜色
            width: 2.0, // 边框线宽
          ),
          borderRadius: const BorderRadius.all( // 配置圆角
            Radius.circular(10),
          ),
          boxShadow: const [ // 配置阴影效果
            BoxShadow(
              color: Colors.black,
              blurRadius: 10.0
            )
          ],
          // LinearGradient 背景线性渐变 RadialGradient经向渐变
          // gradient: const LinearGradient(
          //   colors: [
          //     Colors.red,
          //     Colors.yellow
          //   ]
          // ),


          gradient: const RadialGradient(
            colors: [
              Colors.red,
              Colors.yellow
            ]
          )

        ),

        padding: const EdgeInsets.all(20),
        // transform: Matrix4.translationValues(100, 0, 0),
        // transform: Matrix4.rotationZ(0.3),
        // transform: Matrix4.diagonal3Values(1.2, 1, 1),
        alignment: Alignment.bottomLeft,
        child: const Text(
          '你好Flutter',    
          textAlign: TextAlign.center,
          overflow: TextOverflow.ellipsis,
          maxLines: 1,
          textScaleFactor: 2,
          style: TextStyle(
            fontSize: 16.0,
            color: Colors.red,
            fontWeight: FontWeight.w800,
            fontStyle: FontStyle.italic,
            decoration: TextDecoration.lineThrough,
            decorationColor: Colors.white,
            decorationStyle: TextDecorationStyle.dashed,
            letterSpacing: 5.0,
          ),
        ),
      ),
    );
    }
}

class MyButton extends StatelessWidget {
  const MyButton({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 200,
      height: 60,
      margin: const EdgeInsets.all(10),
      // 文字上下居中
      alignment: Alignment.center,
      decoration: const BoxDecoration(
        color: Colors.blue,
        borderRadius: BorderRadius.all( // 配置圆角
            Radius.circular(10),
        ),
      ),
      child: const Text(
        '按钮', 
        // 文字左右居中
        textAlign: TextAlign.center, 
        style: TextStyle(
          fontSize: 20,
          color: Colors.white
        ),
      ),
    );
  }
}

名称	功能
alignment	topCenter：顶部居中对齐topLeft：顶部左对齐topRight：顶部右对齐center：水平垂直居中对齐centerLeft：垂平居左对齐centerRight：垂直居中水平居右对齐bottomCenter底部居中对齐bottomLeft：底部居左对齐bottomRight：底部居右对齐
decoration	decoration: BoxDecoration( color: Colors.blue, border: Border.all( color:Colors.red, width: 2.0), borderRadius:BorderRadius.circular((8)),// 圆角，boxShadow: [ BoxShadow( color: Colors.blue, offset: Offset(2.0, 2.0),blurRadius: 10.0, ) ], ) //LinearGradient 背景线性渐变 RadialGradient径向渐变gradient: LinearGradient( colors: [Colors.red, Colors.orange], ),
margin	margin属性是表示Container与外部其他组件的距离。 EdgeInsets.all(20.0),
padding	padding就是Container的内边距，指Container边缘与Child之间的距离padding:EdgeInsets.all(10.0)
transform	让Container容易进行一些旋转之类的transform: Matrix4.rotationZ(0.2)
height	容器高度
width	容器宽度
child	容器子元素

Text组件详解

名称	功能
textAlign	文字对齐方式(center居中，left左对齐，right右对齐，justfy两端对齐)
textDirection	文本方向（ltr从左至右，rtl从右至左）
overflow	文字超出屏幕之后的处理方式(clip剪裁，fade渐隐，ellipsis省略号)
maxLines	文字最大行数
textScaleFactor	文字缩放比例
style	文字样式

下面是TextStyle的参数：

名称	功能
decoration	文字装饰(underline下划线，overline上划线，lineThrough删除线)
fontSize	文字大小
fontWeight	文字粗细(bold加粗，normal正常)
fontStyle	文字样式(italic斜体，normal正常)
color	文字颜色
letterSpacing	文字间距
wordSpacing	单词间距
textBaseline	文字基线(ideographic从上到下，alphabetic从左到右)
fontFamily	文字字体
decorationColor	文字装饰颜色
decorationStyle	文字装饰样式（[dashed,dotted]虚线，double两根线，solid一根实线，wavy波浪线）

import 'package:flutter/material.dart';

void  main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('你好Flutter'),
          backgroundColor: Colors.blueGrey[900],
        ),
        body: const MyApp(),
      ),
    )
  );
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        alignment: Alignment.center,
        width: 200.0,
        height: 200.0,
        decoration: BoxDecoration(
          color: Colors.yellow,
          gradient: const LinearGradient(
            colors: [Colors.red, Colors.green, Colors.blue],
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
          ),
          boxShadow: const [
            BoxShadow(
              color: Colors.black,
              offset: Offset(2.0, 2.0),
              blurRadius: 10.0,
            ),
          ],
          border:Border.all(color: Colors.red, width: 5.0),
        ),
        transform: Matrix4.rotationZ(0.2),
        child: const Text(
          'Flutter',
          textAlign: TextAlign.center,
          overflow: TextOverflow.ellipsis,
          style: TextStyle(
            fontSize: 38.0,
            fontWeight: FontWeight.bold,
            color: Colors.white,
            fontStyle: FontStyle.italic,
            decoration: TextDecoration.lineThrough,
            decorationColor: Colors.white,
            decorationStyle: TextDecorationStyle.dashed,
            letterSpacing: 10.0,
          ),
        )
      ),
    );
  }
}

results matching ""

No results matching ""