学习Flutter的第三天（组件1）

组件1：MaterialApp、Container、Text、Image、Icon
组件2：ListView、GridView
组件3：Padding、Row 、Column、Stack、Align、Positioned
组件4：AspectRatio、Row 、Button
组件5：Wrap、StatelessWidget 、StatefulWidget、Dialog、PageView、TextField

3. Widgets介绍

3.1 MaterialApp

Flutter 提供了许多 widget，可帮助你构建遵循 Material Design 的应用。 Material 应用以 MaterialApp widget 开始，它在你的应用的底层下构建了许多有用的 widget。这其中包括 Navigator，它管理由字符串标识的 widget 栈，也称为“routes”。 Navigator 可以让你在应用的页面中平滑的切换。使用 MaterialApp widget 不是必须的，但这是一个很好的做法。

3.2 Container

Container 是一个 widget，允许你自定义其子 widget

sample-flutter-layout.png

Container 跟 html中的div类似

名称	功能
width	宽度
height	高度
alignment	内容显示方位
decoration	BoxDecoration:实现边框、圆角、阴影、形状、渐变、背景图像
margin	外边距
padding	内边距
transform	动画

image-20221007231908610.png

代码如下：

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

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: 100, // 宽
        height: 100,    // 高
        alignment: Alignment.center, // 内容显示方位
        // 实现边框、圆角、阴影、形状、渐变、背景图像
        decoration: BoxDecoration(
            color: Colors.red,  // 背景
            border: Border.all(color: Colors.black, width: 2),  // 边框
            borderRadius: BorderRadius.circular(10),    // 圆角
            // 阴影
            boxShadow: const [
              BoxShadow(
                color: Colors.blue,
                blurRadius: 10.0,
              )
            ],
            gradient:
            // 线性渐变
                const LinearGradient(colors: [Colors.green, Colors.pink]),
              ),
        child: const Text(
          "你好",
          style: TextStyle(
            color: Colors.yellow,
          ),
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 200,
      height: 40,
      alignment: Alignment.center,
      margin: const EdgeInsets.all(10),
      // transform: Matrix4.translationValues(40, 0, 0), //位移40（x,y,z ）
      transform: Matrix4.rotationZ(0.2), // 旋转
      decoration: BoxDecoration(
        color: Colors.blue,
        borderRadius: BorderRadius.circular(20),
      ),
      child: const Text(
        "按钮",
        style: TextStyle(
          color: Colors.white,
          fontSize: 20,
        ),
      ),
    );
  }
}

clipBehavior

它的类型是Clip，clipBehavior是组件内容边缘的切割方式，分为四种：

• none (不做处理)
• hardEdge （当内容溢出时，hardEdge切割容器边缘最快，但是精准度欠佳，可能会有一些锯齿存在。）
• antiAlias （抗锯齿，速度要比hardEdge慢一些，但是边缘要平滑一些。）
• antiAliasWithSaveLayer （图层抗锯齿，就是容器中每一个图层都做抗锯齿处理，而antiAlias是在容器的轮廓做抗锯齿，antiAliasWithSaveLayer效果肯定会更好更平滑，但是速度最慢，如果没有明确指明，建议使用antiAlias，这样效果和性能能够达到较好的平衡。）

如何使容器占满上个容器

宽度 和 高度 = double.infinity 或者 double.maxFinite 都代表无穷大

3.3 Text

文本组件

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

style 样式

名称	功能
decoration	文字装饰线（none没有线，lineThrough删除线，overline上划线）
decorationColor	装饰线颜色
decorationStyle	装饰线风格（[dashed,dotted]虚线，doule两根线，solid一根实线，wavy波浪线）
wordSpacing	单词间隙（如果是负值，就更紧凑）
letterSpacing	字母间隙
fontStyle	文字样式
fontSize	文字大小
color	颜色
fontWeight	字体粗细（bold粗体，normal正常）

3.4 Image

图片组件

Image.network 加载网络图片

Image.asset 加载本地图片

名称	功能
alignment	图片对其方式
color 和 colorBlendMode	设置图片的背景颜色，通常和colorBlendMode配合一起使用，这样可以使图片颜色和背景色混合
fit	控制图片的拉伸和挤压 BoxFit.fill：全图显示，图片会被拉伸，并充满父容器 BoxFit.contain：全图显示，显示原比例，可能会有空隙 BoxFit.cover：显示可能拉伸，可能裁剪，充满 BoxFit.fitWidth：宽度充满，显示可能拉伸、裁剪 BoxFit.fitHeight：高度充满，显示可能拉伸、裁剪 BoxFit.scaleDown：效果和contain差不多，但是此属性不允许显示超过原图片大小，可小不可大
repeat	平铺 ImageRepeat.repeat：横向和纵向都进行重复，直到铺满整个画布 ImageRepeat.repeatX：横向重复，纵向不重复 ImageRepeat.repeatY：纵向重复，横向不重复

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

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 150,
      height: 150,
      margin: const EdgeInsets.fromLTRB(0, 60, 0, 0),
      decoration: const BoxDecoration(color: Colors.yellow),
      child: Image.network(
        "http://sssssxxxxxx.png",
        alignment: Alignment.topLeft,
        fit: BoxFit.cover,
      ),
    );
  }
}

3.4.1 圆形图片

第一个使用Container的圆角

第二个使用ClipOval

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

  @override
  Widget build(BuildContext context) {
    return ClipOval(
      child: Image.network(
        "https://img1.baidu.com/it/u=724179003,4096104503&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500",
        width: 100,
        height: 100,
        fit: BoxFit.cover,
      ),
    );
  }
}

3.4.2 本地图片

修改 pubspec.yaml 文件，打开注释

  assets:
    - images/a.webp
      
      
Image(image: AssetImage("images/a.webp")      

注：每次添加完新的图片，都需要重新run下。这样图片资源，才能复制到build目录下。

3.5 Icon

图标组件

3.5.1 系统Icon

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

  @override
  Widget build(BuildContext context) {
    return Column(
      children: const [
        SizedBox(
          height: 20,
        ),
        // 系统图标
        Icon(
          Icons.home,
          size: 40,
          color: Colors.red,
        ),        
      ],
    );
  }
}

3.5.2 自定义Icon

Icon类似于iconfont即字体图标，它是将图标做成字体文件，然后通过指定不同的字符显示不同图片

icon与Image相比的优势

1. 体积小：可以减小安装包大小。
2. 矢量的：iconfont都是矢量图标，放大不会影响其清晰度。
3. 可以应用文本样式：可以像文本一样改变字体图标的颜色、大小对齐等。
4. 可以通过TextSpan和文本混用。

具体的看视频，查文档