Flutter 基本架构与使用

1.Flutter 基本架构

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

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
          title: const Text("flutter 实战课程"), backgroundColor: Colors.yellow),
      body: const MyApp(),
    ),
  ));
}

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

  @override
  Widget build(BuildContext context) {
    return const Center(
        child: Text("你好 flutter888",
            textDirection: TextDirection.ltr,
            style: TextStyle(
                color: Colors.red,
                fontSize: 30.0,
                fontWeight: FontWeight.w800)),
      );
  }
}

Flutter使用MaterialApp和Scaffold两个组件装饰App

1.1、Flutter的MaterialApp

MaterialApp是Flutter中的一个顶层控件，用于创建一个基于Material Design风格的应用程序。

MaterialApp控件是一个方便的包装器，它提供了一些全局的配置和属性，用于设置应用程序的整体样式、路由导航和其他相关功能。

以下是MaterialApp控件的常用属性：

home: 应用程序的主页。
title: 应用程序的标题，显示在任务管理器或设备导航栏上。
theme: 设置应用程序的主题样式，包括颜色、字体和其他视觉效果。
routes: 定义应用程序的路由表，用于导航到不同的页面。
initialRoute: 指定应用程序的初始路由名称。

1.2、Flutter的Scaffold

Scaffold实现了基本的Material布局。只要是在Material中定义了的单个界面显示的布局控件元素，都可以使用Scaffold来绘制。

Scaffold主要的属性说明

appBar：显示在界面顶部的一个 AppBar。
body：所显示的内容。
floatingActionButton： 在Material中定义的一个功能按钮。
drawer：一个垂直面板，显示于左侧，初始处于隐藏状态，"抽屉"菜单效果。
bottomNavigationBar：显示在底部的导航栏按钮栏。
backgroundColor：背景颜色。

2.Flutter Align、Container、Text组件

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
          title: const Text("flutter 实战课程"), backgroundColor: Colors.yellow),
      body: const MyText(),
    ),
  ));
}

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

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: 250.0,
        height: 250.0,
        decoration: const BoxDecoration(color: Colors.yellow),
        child: const Text("大牛老师的FLUTTER课程大牛老师的FLUTTER课程大牛老师的FLUTTER课程",
            textDirection: TextDirection.ltr,
            style: TextStyle(
                color: Colors.red,
                fontSize: 20.0,
                fontWeight: FontWeight.w800,
                letterSpacing: 2,
                decoration:TextDecoration.underline,
                decorationColor: Colors.red
                )),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: 250.0,
        height: 250.0,
        // 配置方位
        // alignment:Alignment.bottomCenter,
        // margin: EdgeInsets.all(10),
        padding: const EdgeInsets.only(left: 30.0, top: 20.0),
        decoration: BoxDecoration(
            color: Colors.blue,
            // 圆角
            borderRadius: BorderRadius.circular(20),
            // 边框
            border: Border.all(color: Colors.black45, width: 2),
            // 阴影
            boxShadow: const [
              BoxShadow(color: Colors.black45, blurRadius: 20.0)
            ]),
        child: const Text("你好 flutter888",
            textDirection: TextDirection.ltr,
            style: TextStyle(
                color: Colors.red,
                fontSize: 20.0,
                fontWeight: FontWeight.w800)),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return const Align(
      alignment: Alignment.center,
      child: Text("你好 flutter888",
          textDirection: TextDirection.ltr,
          style: TextStyle(
              color: Colors.red, fontSize: 20.0, fontWeight: FontWeight.w800)),
    );
  }
}

1.Flutter Align组件

Align 组件可以调整子组件的位置。

2.Flutter Container容器组件

Container是Flutter里很常用的一个组件，类似于html中的div。

和div一样，container也可以设置宽度（width）、高度（heigth）、内边距（padding）、

外边距（margin）、边框（border）。

属性	说明
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	子元素

3.Flutter Text组件详解

Text 组件非常常用，用来显示文本

属性	说明
textAlign	文本对齐方式（center居中，left左对齐，right右对齐，justfy两端对齐）
textDirection	文本方向（ltr从左至右，rtl从右至左）
overflow	文字超出屏幕之后的处理方式（clip裁剪，fade渐隐，ellipsis省略号）
textScaleFactor	字体显示倍率
maxLines	文字显示最大行数
style	字体的样式设置
bottomRight	底部居右对齐
child	子元素

TextStyle 属性介绍：

属性	说明
decoration	文字装饰线（none没有线，lineThrough删除线，overline上划线，underline下划线）
decorationColor	文字装饰线颜色
decorationStyle	文字装饰线风格（[dashed,dotted]虚线，double两根线，solid一根实线，wavy波浪线）
wordSpacing	单词间隙（如果是负值，会让单词变得更紧凑
letterSpacing	字母间隙（如果是负值，会让字母变得更紧凑）
fontStyle	文字样式（italic斜体，normal正常体）
fontSize	文字大小
color	文字颜色
fontWeight	字体粗细（bold粗体，normal正常体）

3.StatelelessWidget、StatefulWidget组件

1.StatelelessWidget 是无状态组件，状态不可改变的。

2.StatelefulWidget 是有状态组件，持有的状态可能在widget生命周期改变，通俗的讲如果我们想改变页面中的数据的话这个时候就需要继承StatelefulWidget

我们最常用的就是根据Api接口返回的数据动态刷新页面，那么在此种场景中，必须继承StatefulWidget。

import 'package:flutter/material.dart';

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

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyStatefulWidget(),
    );
  }
}

// 有状态的组件
class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({super.key});

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int _count = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("flutter StatefulWidget"),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // 注意
          setState(() {
            _count++;
            print(_count);
          });
        },
        child: Icon(Icons.add),
      ),
      body: Center(
        child: Text(
          "$_count",
          style: TextStyle(fontSize: 100),
        ),
      ),
    );
  }
}

// 无状态的组件
class MyStatelessWidget extends StatelessWidget {
  const MyStatelessWidget({super.key});

  @override
  Widget build(BuildContext context) {
    int _count = 0;
    return Scaffold(
      appBar: AppBar(
        title: const Text("flutter StatelessWidget"),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          _count++;
          print(_count);
        },
        child: Icon(Icons.add),
      ),
      body: Center(
        child: Text(
          "$_count",
          style: TextStyle(fontSize: 100),
        ),
      ),
    );
  }
}

4.路由

Flutter中的路由通俗的讲是页面跳转，

Navigator.of(context) .push() 页面跳转

Navigator.of(context).pop(); 返回上一页

Flutter 中给我们提供了两种配置路由跳转的方式 1.基本路由 2.命名路由。

1.Flutter中的基本路由

比如我们现在想从HomePage页面跳转到 SearchPage页面

1、需要在HomePage中引入SearchPage.dart

2、在HomePage中通过navigator.of(context).push()跳转。

Navigator.of(context).push() //属于基本路由跳转。

通过push参数需要一个MaterialPageRoute对象。

// 基本路由跳转
Navigator.of(context).push(
  MaterialPageRoute(builder: (BuildContext context) { 
    return const SearchPage();
   })
);

2.Flutter 中的基本路由跳转传值

需求：从 HomePage 页面跳转到 CategoryPage 页面

1、在CategoryPage 页面定义参数 接收传值

2、跳转页面实现传值

// 基本路由跳转
Navigator.of(context).push(
  MaterialPageRoute(builder: (BuildContext context) { 
    return const CategoryPage(title: '小米手机', id: 9,);
   })
);