[Code with me]开发背单词App | Flutter框架 | 无需任何前置知识教程 #3

紧跟上一集，这集我们做下细节

1.为按钮Button内添加一个图标，使其有文字也有图标提示

        位置：start_screen.dart --> build()方法内的OutlineButton类 

---

原OutlinedButton()代码 ，如下

OutlinedButton(
  onPressed: () {},
  style: OutlinedButton.styleFrom(foregroundColor: Colors.white),
  child: const Text('Start Quiz'),
)

我们需要做出一系列的修改：

        a.为了提供显示图标的功能：修改OutlinedButton ---> OutlinedButton.icon()

        b.修改child ---> label

        c.为了显示图标：增加icon参数：它接受一个widget类型参数，所以我们使用任何widget的子类或是Image.asset()方法来使用自己的图片；但是我们只是演示，所以使用它内置的Icon()类即可 Icon(Icons.arrow_right_alt)

修改后的代码，如下

OutlinedButton.icon(
  onPressed: () {},
  style: OutlinedButton.styleFrom(foregroundColor: Colors.white),
  icon: const Icon(Icons.arrow_right_alt),
  label: const Text('Start Quiz'),
)

重新运行下，出现如图 ，这就成功了，我们同时在OutlinedButton组件里显示图标和文字

 2.为图片组件增加透明度

        位置：start_screen.dart --> build()方法内的Image.asset()类 

---

原代码Image.asset()如下：

Image.asset(
    'assets/images/quiz-logo.png',
     width: 300,
),

---

 有两种方法：

        第一种，会消耗较多性能，不推荐使用，但我还是要写出来

        a.在Image.asset()外围套上一个Opacity()类

        b.鼠标左键点击Image，敲入快捷键ctrl+shift+R

        c.选择Wrap with widget后，将widget修改为Opacity

        d.添加opacity属性，数值为0.5   注释：opacity从0到1，显示透明程度，0为完全透明，1为完全不透明

---

修改过后的代码，如下：

Opacity(
  opacity: 0.5,
  child: Image.asset(
  'assets/images/quiz-logo.png',
  width: 300,
   ),
),

保存运行下，对比看下，左边为未透明的，右边是透明了0.5的，

        

---

         第二种，在原代码内加入color属性，并对其做文章

        在Image.asset()内添加color属性，color属性的作用是在该图片上添加一个类似颜色蒙版以改变它的颜色，借助Color.fromARGB(a,r,g,b)方法，其中的a参数代表alpha值，我们可以利用a参数改变它的透明度。

        如下，Color.fromARGB(135,255,255,255). 第一个参数可以改变透明度，从0代表完全透明，255代表完全不透明，也可以拉拽右边白色柱状体来调节，自己动手试试把

修改后的代码如下，

Image.asset(
   'assets/images/quiz-logo.png',
   width: 300,
   color: const Color.fromARGB(133, 255, 255, 255),
),

运行下，看下：所以同样实现了透明功能

3. 开始构建Quiz类页面

        目的：在点击了Start Quiz按钮后，我们希望跳转到Quiz页面

        I.在lib文件夹中，添加quiz.dart文件，如下

        II.将该quiz类定义为StatefulWidget，即有状态的组件

即该quiz类内的数据是可以在运行中变化的，对比Statelesswidget的数据是不可变的

        a.在开始第一行输入如下，引入我们需要的包，这算是核心包，每个dart文件都需要它

import 'package:flutter/material.dart';

        b.创建Quiz类，一般该名字和文件同步，并继承至StatefulWidget，以及它的方法createState()

class Quiz extends StatefulWidget {

}

        c.对于创建一个StatefulWidget来说：

你需要两个类，一个类是继承StatefulWidget，作为整棵widget树中的一个节点，也就是b中的代码；

另一个类继承至State，用于记录变化的状态和信息，并及时更新数据至对应statefulwidget，也就是下面的代码；

class _QuizState extends State<Quiz>{
  @override
  Widget build(Object context) {
    return  // To Do Code
  }
  
}

        细节1.该类的名字取决于你，但是根据习惯是该类名字+State。注意到前面有个下划线_，这表示该_QuizState为私有private的，因为该类的作用是为了更新数据，并且只为了它所对应的statefulwidget更新，就像比翼鸟一样不能分开，所以其他类不应该能访问它。

        细节2.注意到它继承至State<Quiz>，表明了该State与Quiz建立起了联系，这种尖括号实际上表示泛型

        d.精简main.dart代码，迁移至Quiz类

        从main.dart中，取包括MaterialApp()以内的所有代码剪切至quiz.dart的_QuizState()的return中

        e.回到上面的Quiz()类中，里面还是空的

        添加一个createState()方法，这是固定的，记住就行了，这个方法的类型是以Quiz为泛型参数的State泛型类，令它返回下面的_QuizState类，再加上一个构造函数Quiz({super.key})即可

它的功能就是和下面的_QuizState类建立联系，进行数据交换。

其实这些代码是会自动生成的，这只是解释下它们的功能以及细节

class Quiz extends StatefulWidget {
  const Quiz({super.key});

  @override
  State<Quiz> createState() {
    return _QuizState();
  }
}

        f.最终的quiz.dart代码是这样的,记得引入start_screen.dart这个类，否则下面第26行的const Start_Screen()会报红

import 'package:flutter/material.dart';
import 'package:adv_basics/start_screen.dart';

class Quiz extends StatefulWidget {
  const Quiz({super.key});

  @override
  State<Quiz> createState() {
    return _QuizState();
  }
}

class _QuizState extends State<Quiz> {
  @override
  Widget build(Object context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
          decoration: const BoxDecoration(
              gradient: LinearGradient(
            colors: [
              Color.fromARGB(255, 132, 84, 214),
              Color.fromARGB(255, 67, 17, 99)
            ],
            begin: Alignment.topLeft,
            end: Alignment.bottomRight,
          )),
          child: const StartScreen(),
        ),
      ),
    );
  }
}

III.同样再lib文件夹中，添加一个questions_screen.dart文件

        这个文件内做的事情和quiz.dart是一样的，都是创建一个statefulwidget类，在最后只是随意的返回一个Text()组件，把这个Question_screen.dart的创建作为作业，自己动手试试吧，如果忘了，可以参考前面的内容。

        你成功了吗？

        以下是代码：

import 'package:flutter/material.dart';

class QuestionsScreen extends StatefulWidget {
  const QuestionsScreen({super.key});

  @override
  State<StatefulWidget> createState() {
    return _QuestionScreenState();
  }
}

class _QuestionScreenState extends State<QuestionsScreen> {
  @override
  Widget build(BuildContext context) {
    return const Text('QuestionScreen');
  }
}

4.main.dart文件修改

既然我们把代码都迁移到了Quiz()里面，runApp()就不要运行之前的start_screen()文件，而是用Quiz()，如下：

import 'package:adv_basics/quiz.dart';
import 'package:flutter/material.dart';

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

运行下，没有区别，我们只是修改了代码而已。

 这集教程中，

1.我们学习了如何为按钮同时添加文字和图标，使其更美观；

2.我们学习了如何为图片增加透明度，有两种方法。

3.我们学习了如何创建一个Stateful有状态组件，它主要功能是使得组件内部的数据可以在运行中改变

熟能生巧，多多练习。