【Flutter】Flutter入门&Container&Text

🔥 本文由 程序喵正在路上 原创，CSDN首发！
💖 系列专栏：Flutter学习
🌠 首发时间：2024年5月23日
🦋 欢迎关注🖱点赞👍收藏🌟留言🐾

Flutter入门

目录结构介绍

创建一个 Flutter 项目的方式有很多种：

1. 在 Vscode 中创建 Flutter 项目

2. 在 Android Studio 中创建 Flutter 项目，正式开发中推荐这种方式

3. 在命令行窗口通过指令 flutter create 项目名称 创建项目

   

   然后我们可以通过指令来打开这个项目，当然，你也可以手动在 Vscode 中打开这个项目：

   

Flutter项目的目录结构

我们主要注意 lib 和 pubspec.yaml 这两个目录：

入口文件和入口方法

每一个 flutter 项目的 lib 目录里面都有一个 main.dart 文件，这个文件就是 flutter 的入口文件

void main() {
  runApp(const MyApp());
}

//简写
void main()=>runApp(MyApp());

在这个文件中，有一个 main 方法，main 方法是 dart 的入口方法。runApp 方法是 flutter 的入口方法，MyApp 是自定义的一个组件。

入门程序——Center组件的使用

首先，将 main.dart 中的内容清空，我们来写一个入门程序：

//必须导入的包
//输入importM后回车即可快捷生成
import 'package:flutter/material.dart';

void main() {
  //加const是为了让多个对象共享存储空间
  runApp(const Center(
    child: Text(
      "你好Flutter",
      //文本方向：从左到右
      textDirection: TextDirection.ltr,
      //文本风格
      style: TextStyle(fontSize: 35.0, color: Colors.lightBlue),
    ),
  ));
}

启动一下：

然后我们看到背景是黑色的，我们可以再给它加两个装饰组件 MaterialApp 和 Scaffold：

//必须导入的包
import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      //顶部导航栏
      appBar: AppBar(
        title: const Text("入门程序"),
      ),
      //主体
      body: const Center(
        child: Text(
          "你好Flutter",
          //文本方向：从左到右
          textDirection: TextDirection.ltr,
          //文本风格
          style: TextStyle(fontSize: 35.0, color: Colors.lightBlue),
        ),
      ),
    ),
  ));
}

在 Vscode 终端按下 r 键，热加载一下，如果没有反应，就按下 R 键，热重启一下项目，然后再查看修改后的页面：

然后，我们发现将全部代码都写到了 runApp 方法中，显得特别臃肿，特别是当我们的代码多了之后，所以我们将里面的代码抽离出来成一个类：

//必须导入的包
import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      //顶部导航栏
      appBar: AppBar(
        title: const Text("入门程序"),
      ),
      //主体
      body: const HomeWidget(),
    ),
  ));
}

//输入statelessw后回车可快速生成
class HomeWidget extends StatelessWidget {
  const HomeWidget({super.key});

  //继承抽象类，所以要重写其抽象方法
  @override
  Widget build(BuildContext context) {
    return const Center(
      child: Text(
        "你好Flutter",
        //文本方向：从左到右
        textDirection: TextDirection.ltr,
        //文本风格
        style: TextStyle(fontSize: 35.0, color: Colors.lightBlue),
      ),
    );
  }
}

把内容单独抽离成一个组件

• 在 Flutter 中自定义组件其实就是一个类，这个类需要继承StatelessWidget 或者 StatefulWidget
• 前期我们都继承 StatelessWidget，后期才会使用到 StatefulWidget
  • StatelessWidget 是无状态组件，状态不可变的 widget
  • StatefulWidget 是有状态组件，持有的状态可能在 widget 生命周期改变

MaterialApp 和 Scaffold：装饰App

MaterialApp组件

MaterialApp 是一个方便的 Widget，它封装了应用程序实现 Material Design 所需要的一些 Widget。一般作为顶层 widget 使用。

常用的属性：

• home（主页）
• title（标题）
• color（颜色）
• theme（主题）
• routes（路由）

Scaffold组件

Scaffold 是 Material Design 布局结构的基本实现。此类提供了用于显示 drawer、snackbar 和底部 sheet 的 API。

Scaffold 有下面几个主要属性：

• appBar：显示在界面顶部的一个 AppBar
• body：当前界面所显示的主要内容 Widget
• drawer：抽屉菜单控件。

Container容器组件

组件属性介绍

Container 容器组件的一些属性及其功能：

属性	功能
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 与外部其他组件的距离，margin: EdgeInsets.all(20.0)
padding	padding 就是 Container 的内边距，指 Container 边缘与 child 之间的距离，padding: EdgeInsets.all(10.0)
transform	让 Container 容易进行一些旋转之类，transform: Matrix4.rotationZ(0.2)
height	容器高度
width	容器宽度
child	容器子元素

应用示例

1. import 'package:flutter/material.dart';
   
   void main() {
     runApp(MaterialApp(
       home: Scaffold(
           appBar: AppBar(title: const Text("Container容器组件")),
           body: const MyApp()),
     ));
   }
   
   class MyApp extends StatelessWidget {
     const MyApp({super.key});
   
     @override
     Widget build(BuildContext context) {
       return Center(
         child: Container(
             alignment: Alignment.center, //容器中内容居中对齐
             //容器大小
             height: 200,
             width: 200,
             decoration: BoxDecoration(
               color: Colors.yellow,
               //背景从红色到橙色线性渐变
               gradient: const LinearGradient(colors: [Colors.red, Colors.orange]),
               boxShadow: const [
                 //卡片阴影
                 BoxShadow(
                     //阴影颜色
                     color: Colors.blue,
                     //偏移量
                     offset: Offset(2.0, 2.0),
                     //阴影范围
                     blurRadius: 10.0)
               ],
               //边框
               border: Border.all(color: Colors.black, width: 1),
               //边框圆角
               borderRadius: BorderRadius.circular((20)),
             ),
             //让容器绕Z轴旋转
             transform: Matrix4.rotationZ(.2),
             //子元素
             child: const Text(
               "你好Flutter",
               style: TextStyle(fontSize: 20),
             )),
       );
     }
   }
   

   

2. 通过 Container 创建一个按钮

   import 'package:flutter/material.dart';
   
   void main() {
     runApp(MaterialApp(
       home: Scaffold(
           appBar: AppBar(title: const Text("Container创建按钮")),
           body: const MyApp()),
     ));
   }
   
   class MyApp extends StatelessWidget {
     const MyApp({super.key});
   
     @override
     Widget build(BuildContext context) {
       return Center(
         child: Container(
           alignment: Alignment.center,
           height: 40,
           width: 140,
           decoration: BoxDecoration(
               color: Colors.blue, borderRadius: BorderRadius.circular(12)),
           child: const Text(
             "按钮",
             style: TextStyle(fontSize: 18, color: Colors.white),
           ),
         ),
       );
     }
   }
   

   

Text组件

组件参数介绍

Text 组件属性：

TextStyle 组件属性：

应用实例

我们修改了前面代码的 Text 组件部分：

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
        appBar: AppBar(title: const Text("Text组件")), body: const MyApp()),
  ));
}

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

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
          alignment: Alignment.center, //容器中内容居中对齐
          //容器大小
          height: 200,
          width: 200,
          decoration: BoxDecoration(
            color: Colors.yellow,
            //背景从红色到橙色线性渐变
            gradient: const LinearGradient(colors: [Colors.red, Colors.orange]),
            boxShadow: const [
              //卡片阴影
              BoxShadow(
                  //阴影颜色
                  color: Colors.blue,
                  //偏移量
                  offset: Offset(2.0, 2.0),
                  //阴影范围
                  blurRadius: 10.0)
            ],
            //边框
            border: Border.all(color: Colors.black, width: 1),
            //边框圆角
            borderRadius: BorderRadius.circular((20)),
          ),
          //让容器绕Z轴旋转
          transform: Matrix4.rotationZ(.2),
          //子元素
          child: const Text(
            "All lights need time to be seen, and all luck is the foreshadowing of efforts",
            textAlign: TextAlign.center,
            overflow: TextOverflow.ellipsis,
            maxLines: 2,
            textScaler: TextScaler.linear(1.4),
            style: TextStyle(
                fontSize: 18,
                color: Colors.black,
                fontWeight: FontWeight.w300,
                fontStyle: FontStyle.italic,
                decoration: TextDecoration.underline,
                decorationColor: Colors.white,
                decorationStyle: TextDecorationStyle.wavy,
                letterSpacing: 3),
          )),
    );
  }
}