Flutter-3 ( 基础组件1 )

一、整体结构

这段代码构建了一个 Flutter 应用的界面。它包含一个无状态的About组件和一个有状态的MyAbout组件。

1. About组件是一个无状态小部件，它返回一个MaterialApp，并将MyAbout组件作为其首页。

2. MyAbout组件是一个有状态小部件，它包含了一系列 UI 元素和交互逻辑。

二、UI 元素和交互

1. 文本显示：

   • 有一个固定的文本 “这是一个文本”，通过常量optionsStyle设置了特定的颜色、字体大小、字体粗细、字符间距和无文本装饰。
   • 另一个文本显示变量num的值，初始值为 0，并且可以通过点击TextButton增加。

2. 按钮：

   • TextButton：点击时打印 “点击了按钮”，并增加num的值。设置了背景颜色和前景颜色，但使用了可能已过时的WidgetStatePropertyAll。
   • OutlinedButton：点击时打印 “OutLinebutton”。
   • TextButton带图标：点击时打印 “这是点击的 Icon”，并显示一个特定颜色和大小的图标。

3. 进度条：

   • 包含多个线性进度条和圆形进度条，设置了背景颜色和进度颜色，部分进度条有固定的进度值。

4. 开关和复选框：

   • Switch：一个开关组件，初始状态为_isSelected，可以通过点击改变状态，并触发状态更新。
   • Checkbox：一个复选框组件，初始状态为_isChecked，点击时可以改变状态，并触发状态更新。

5. 滑块：

   • Slider：一个滑块组件，可以在 0 到 100 之间滑动，并且只能滑动到特定的值（0、25、50、75、100）。滑动时会更新progressValue变量，并触发状态更新。

6. 文本行：

   • Row：包含两个文本，分别显示 “hello world” 和 “I am Jack”，并设置了不同的颜色和字体大小，文本在水平方向上两端对齐。

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/src/widgets/widget_state.dart';

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyAbout(),
    );
  }
}

class MyAbout extends StatefulWidget {
  @override
  _MyAboutState createState() => _MyAboutState();
}

class _MyAboutState extends State<MyAbout> {
  bool _isSelected = true;
  bool? _isChecked = true;
  double progressValue = 10;
  int num = 0;

  static const TextStyle optionsStyle = TextStyle(
    color: Color.fromRGBO(108, 90, 90, 1),
    fontSize: 20.0,
    fontWeight: FontWeight.bold,
    letterSpacing: 8.0,
    decoration: TextDecoration.none,
  );

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        const Text(
          "这是一个文本",
          style:optionsStyle
        ),
        Text(
          "$num",
          style: const TextStyle(
              color: Colors.indigoAccent, fontWeight: FontWeight.bold),
        ),
        TextButton(
            child: Text("TextButton"),
            style: ButtonStyle(
                backgroundColor: WidgetStatePropertyAll(Colors.amber),
                foregroundColor: WidgetStatePropertyAll(Colors.red)),
            onPressed: () {
              print("点击了按钮");
              setState(() {
                num++;
              });
            }),
        OutlinedButton(
            onPressed: () {
              print("OutLinebutton");
            },
            child: Text("OutLinebutton")),
        TextButton(
            onPressed: () {
              print("这是点击的Icon");
            },
            child: const Icon(
              Icons.add_circle,
              color: Color.fromRGBO(213, 123, 24, 1),
              size: 40.0,
            )),
        LinearProgressIndicator(
          backgroundColor: Colors.grey[200],
          valueColor: AlwaysStoppedAnimation(Colors.blue),
          value: .5,
        ),
        LinearProgressIndicator(
          backgroundColor: Colors.grey[200],
          valueColor: AlwaysStoppedAnimation(Colors.blue),
        ),
        CircularProgressIndicator(
          backgroundColor: Colors.grey[200],
          valueColor: AlwaysStoppedAnimation(Colors.blue),
          value: .5,
        ),
        Switch(
            value: _isSelected,
            onChanged: (val) {
              setState(() {
                _isSelected = val;
              });
            }),
        Checkbox(
            value: _isChecked,
            activeColor: Colors.red,
            onChanged: (value) {
              setState(() {
                _isChecked = value;
              });
            }),
        Slider(
          value: progressValue,
          min: 0.0,
          max: 100.0,
          divisions: 4,
          // 只能滑动到 0、25、50、75、100这几个值
          onChanged: (double) {
            setState(() {
              progressValue = double.floorToDouble(); //转成double
            });
          },
        ),
        const Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Text(
              " hello world ",
              style: TextStyle(color: Colors.red, fontSize: 12),
            ),
            Text(
              " I am Jack ",
              style: TextStyle(color: Colors.amber, fontSize: 14),
            ),
          ],
        )
      ],
    );
  }
}