Flutter技术学习

news2024/10/12 1:50:08

以下内容更适用于不拘泥于教程学习，而是从简单项目入手的初学者。

在开始第一个项目之前，我们先要了解两个概念。

Widget 和属性

Widget 是用户界面的基本构建块，可以是任何 UI 元素。
属性是 widget 类中定义的变量，用于配置和定制 widget 的外观和行为。
当你创建一个 widget 时，可以通过构造函数传递参数来设置这些属性，从而定制 widget 的表现。
Widget包含属性

UI 元素：Text、Image、Container、Column、AppBar 、布局等等

外观：颜色、大小、形状等等

行为：点击事件、动画、数据更新等等

vscode创建默认项目（这里默认前置工作都已经准备好了）

1. Hellow world

替换lib\main.dart

import 'package:flutter/material.dart';

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

// 定义无状态组件
class MyApp extends StatelessWidget{
  const MyApp({super.key});

  @override
  Widget build(BuildContext context){
    return MaterialApp(
      // 初始标题
      title: 'Welcome to flutter',
      // 初始页面
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Welcome to flutter'),
        ),
        // 居中   一个子widget
        body: const Center(
          child: Text(
          'Hellow World', 
          // 字体样式
          style: TextStyle(
            // 字体颜色
            color: Colors.green,
          )),
        ),
        // 垂直排列 多个子widget
        // body: Column(
        //   // 只能定义一个children属性 可包含 一个wedget或者wedget列表
        //   children: [
        //     const Text("Hello World"),
        //     Image.network("https://gd-hbimg.huaban.com/88b49ee5dc63c49f26d984a71ce061729f27070c3124c-jZyeMc_fw1200webp",fit: BoxFit.cover),
        //     const Center(
        //       child: Text("Hello world"),
        //     ),
        //   ],
          
        // ),
      ),
    );
  }
}

flutter run 命令运行

2. 使用依赖包（package）

包管理：https://pub.dev/

打开包管理网站搜索 english_words

终端运行 flutter packages get 获取依赖包

import 'package:flutter/material.dart';
// 引入 英文单词 包
import 'package:english_words/english_words.dart';

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

// 定义无状态组件
class MyApp extends StatelessWidget{
  
  const MyApp({super.key});
  

  @override
  Widget build(BuildContext context){
    
    return MaterialApp(
      // 初始标题
      title: 'Welcome to flutter',
      // 初始页面
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Welcome to flutter'),
        ),
        // 居中   一个子widget
        body: Center(
          child: Text(
          generateWordPairs().take(10).map((pair) => pair.asPascalCase).join('\n'), 
          // 字体样式
          style: TextStyle(
            // 字体颜色
            color: Colors.green,
          )),
        ),
      ),
    );
  }
}

保存终端输入r 热重载运行