为了账号安全，请及时绑定邮箱和手机立即绑定
首页 手记 Flutter入门：新手必学的Flutter基础教程

Flutter入门：新手必学的Flutter基础教程

标签：
移动开发
概述

本文全面介绍了Flutter入门的相关知识，包括环境搭建、基本组件与布局、事件处理、状态管理和实战项目。通过详细示例代码，帮助开发者快速掌握Flutter开发技巧。

Flutter简介与环境搭建

什么是Flutter

Flutter是Google开发的一款开源UI框架，它允许开发者使用一套代码库来开发iOS、Android、Web、桌面和嵌入式设备的原生应用。Flutter结合了高性能的渲染引擎与丰富的UI组件，为开发者提供了一种快速构建跨平台应用的工具。

Flutter的优势与应用场景

Flutter的优势在于其高性能、热重载、丰富的组件库、自定义性强以及跨平台开发能力。在实际应用中，Flutter可以用来开发各种类型的应用，包括但不限于移动应用、Web应用、桌面应用等。对于需要高度交互性的应用，如游戏、动画等，Flutter尤其适用，因为它提供了丰富的动画和交互效果。

开发环境搭建步骤

  1. 安装Dart SDK：首先需要安装Flutter的依赖环境Dart SDK。可以从Dart官网下载并安装最新版本。
  2. 安装Flutter SDK：访问Flutter官网，下载Flutter SDK并解压到本地。
  3. 配置环境变量：将Flutter SDK的路径添加到系统环境变量中。
  4. 安装IDE：推荐使用支持Flutter的IDE，如Android Studio或Visual Studio Code。
  5. 配置IDE：
    • 在Android Studio中，打开File > Settings > Plugins，安装Flutter和Dart插件。
    • 在VS Code中，打开Extensions，搜索并安装Flutter和Dart插件。
创建第一个Flutter应用

创建第一个Flutter应用，可以使用命令行工具或IDE来搭建一个简单的Hello World项目。

命令行创建项目：

flutter create my_first_flutter_app
cd my_first_flutter_app

修改主页面main.dart：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Hello Flutter'),
      ),
      body: Center(
        child: Text(
          'Hello World',
          style: TextStyle(fontSize: 24),
        ),
      ),
    );
  }
}

运行项目：

flutter run

Flutter基本组件与布局

常见UI组件介绍

Flutter中的UI组件可以分为文本、按钮、输入框、列表、卡片等。以下是一些常见的组件：

  • Text：用于显示文本。
  • Container：包含内容的容器，可以设置背景色、边框、圆角等。
  • Button：包括RaisedButton、FlatButton、IconButton等，用于触发事件。
  • TextField：用于输入文本。
  • ListView：用于展示列表数据。
  • Card：卡片组件，常用于展示信息块。
示例代码：使用TextField组件
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('TextField Example'),
        ),
        body: Padding(
          padding: EdgeInsets.all(16),
          child: Column(
            children: <Widget>[
              TextField(
                decoration: InputDecoration(
                  labelText: 'Enter your name',
                  border: OutlineInputBorder(),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
示例代码：使用ListView组件
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('ListView Example'),
        ),
        body: ListView(
          children: <Widget>[
            ListTile(
              title: Text('Item 1'),
            ),
            ListTile(
              title: Text('Item 2'),
            ),
            ListTile(
              title: Text('Item 3'),
            ),
          ],
        ),
      ),
    );
  }
}

布局方式：Row、Column、Stack等

Flutter使用Flexbox布局，常用布局组件包括Row、Column、Stack等。

  • Row：横向布局，将子组件水平排列。
  • Column：纵向布局，将子组件垂直排列。
  • Stack：堆叠布局，可以将多个子组件重叠在一起。
示例代码：
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Layout Example'),
        ),
        body: Column(
          children: <Widget>[
            Row(
              children: <Widget>[
                Text('Row 1'),
                Text('Row 2'),
                Text('Row 3'),
              ],
            ),
            Column(
              children: <Widget>[
                Text('Column 1'),
                Text('Column 2'),
                Text('Column 3'),
              ],
            ),
            Stack(
              children: <Widget>[
                Container(
                  color: Colors.red,
                  height: 100,
                  width: 100,
                ),
                Container(
                  color: Colors.blue,
                  height: 70,
                  width: 70,
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

常用属性与样式设置

  • padding：设置内边距。
  • margin：设置外边距。
  • color：设置背景颜色。
  • borderRadius：设置圆角。
  • alignment：对齐方式。
示例代码：
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Style Example'),
        ),
        body: Padding(
          padding: EdgeInsets.all(16),
          child: Container(
            width: 200,
            height: 200,
            color: Colors.green,
            padding: EdgeInsets.all(10),
            margin: EdgeInsets.all(10),
            borderRadius: BorderRadius.circular(10),
            child: Center(
              child: Text(
                'Styled Container',
                style: TextStyle(color: Colors.white, fontSize: 18),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

示例代码解析

以上示例代码展示了如何在Flutter中创建一个简单的布局，包含Row、Column和Stack布局。

  • Row：将多个文本组件水平排列。
  • Column：将多个文本组件垂直排列。
  • Stack：将两个容器重叠在一起，背景色为红色的容器位于底层，蓝色的容器位于上层。

Flutter事件处理与交互

事件监听机制

在Flutter中，我们可以通过监听事件来实现用户交互。常见的事件包括点击、滑动、长按等。事件监听机制主要通过GestureDetector来实现。

  • onTap：点击事件。
  • onLongPress：长按事件。
  • onHorizontalDragUpdate：水平滑动。
示例代码：
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Gesture Example'),
        ),
        body: Center(
          child: GestureDetector(
            onTap: () {
              print('Tap detected');
            },
            onLongPress: () {
              print('Long press detected');
            },
            onHorizontalDragUpdate: (DragUpdateDetails details) {
              print('Drag update: ${details.delta}');
            },
            child: Container(
              width: 200,
              height: 200,
              color: Colors.blue,
              child: Center(
                child: Text(
                  'Tap or Drag',
                  style: TextStyle(color: Colors.white, fontSize: 18),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

响应用户输入

在Flutter中处理用户输入，可以通过TextField、DropdownButton、Checkbox等组件来实现。

  • TextField：文本输入框，可以通过onChanged或onSubmitted事件来响应输入变化。
  • DropdownButton：下拉选择框，通过onChanged事件来响应选择变化。
  • Checkbox：复选框，通过onChanged事件来响应选择变化。
示例代码：
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Input Example'),
        ),
        body: Padding(
          padding: EdgeInsets.all(16),
          child: Column(
            children: <Widget>[
              TextField(
                decoration: InputDecoration(
                  labelText: 'Username',
                  border: OutlineInputBorder(),
                ),
                onChanged: (value) {
                  print('Username: $value');
                },
              ),
              DropdownButton<String>(
                value: 'Option 1',
                onChanged: (String newValue) {
                  print('Selected: $newValue');
                },
                items: <String>['Option 1', 'Option 2', 'Option 3']
                    .map<DropdownMenuItem<String>>((String value) {
                  return DropdownMenuItem<String>(
                    value: value,
                    child: Text(value),
                  );
                }).toList(),
              ),
              Checkbox(
                value: true,
                onChanged: (bool value) {
                  print('Checkbox value: $value');
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

导航与页面跳转

在Flutter中，可以通过Navigator来实现页面跳转。Navigator允许你在不同页面之间进行导航，常见的导航方式包括push和pop。

  • push：添加一个新页面到导航栈中。
  • pop：从导航栈中移除当前页面，返回到前一个页面。
示例代码：
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Screen'),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => DetailScreen()),
            );
          },
          child: Text('Go to Detail Screen'),
        ),
      ),
    );
  }
}

class DetailScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Detail Screen'),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Go Back'),
        ),
      ),
    );
  }
}

异步编程基础

异步编程是Flutter中的重要概念，主要通过Future和Stream来实现。Future处理异步操作的结果，Stream处理连续的数据流。

  • Future：表示异步操作的结果。
  • Stream：表示连续的数据流，可以用来处理网络请求、文件读取等操作。
示例代码：
import 'dart:async';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Future Example'),
        ),
        body: Center(
          child: FutureBuilder<String>(
            future: fetchUser(),
            builder: (context, snapshot) {
              if (snapshot.connectionState == ConnectionState.done) {
                if (snapshot.hasError) {
                  return Text('Error: ${snapshot.error}');
                } else {
                  return Text('Hello, ${snapshot.data}');
                }
              } else {
                return CircularProgressIndicator();
              }
            },
          ),
        ),
      ),
    );
  }
}

Future<String> fetchUser() async {
  await Future.delayed(Duration(seconds: 2));
  return 'User';
}

Flutter状态管理入门

状态管理的必要性

状态管理是Flutter应用开发中的一个重要概念。状态是指应用程序中可变的状态信息，包括UI状态、数据状态等。有效的状态管理可以提高应用的性能和用户体验。常见的状态管理方式包括使用StatefulWidget、InheritedWidget、Provider、Bloc等。

StatelessWidget与StatefulWidget

  • StatelessWidget：不可变组件，适用于不需要状态的组件。
  • StatefulWidget：可变组件，适用于需要状态的组件。
示例代码：
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Stateful Example'),
        ),
        body: CounterWidget(),
      ),
    );
  }
}

class CounterWidget extends StatefulWidget {
  @override
  _CounterWidgetState createState() => _CounterWidgetState();
}

class _CounterWidgetState extends State<CounterWidget> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text(
            'You have pressed the button this many times:',
          ),
          Text(
            '$_counter',
            style: Theme.of(context).textTheme.headline4,
          ),
          RaisedButton(
            onPressed: _incrementCounter,
            child: Text('Increment'),
          ),
        ],
      ),
    );
  }
}

状态管理库介绍：Provider、Bloc等

  • Provider: 通过InheritedWidget传递数据，适用于较小的应用。
  • Bloc: 通过事件和状态流处理应用状态，适用于复杂的应用。
示例代码（使用Provider）：
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => Counter(),
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Provider Example'),
        ),
        body: CounterWidget(),
      ),
    );
  }
}

class Counter with ChangeNotifier {
  int _counter = 0;

  int get counter => _counter;

  void increment() {
    _counter++;
    notifyListeners();
  }
}

class CounterWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final counter = Provider.of<Counter>(context);

    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text(
            'You have pressed the button this many times:',
          ),
          Text(
            '${counter.counter}',
            style: Theme.of(context).textTheme.headline4,
          ),
          RaisedButton(
            onPressed: () {
              counter.increment();
            },
            child: Text('Increment'),
          ),
        ],
      ),
    );
  }
}
示例代码（使用Bloc）：
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:counter_bloc/bloc/counter_bloc.dart';

void main() {
  runApp(
    BlocProvider(
      create: (context) => CounterBloc(),
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Bloc Example'),
        ),
        body: CounterWidget(),
      ),
    );
  }
}

class CounterWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final bloc = BlocProvider.of<CounterBloc>(context);

    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text(
            'You have pressed the button this many times:',
          ),
          BlocBuilder<CounterBloc, int>(
            builder: (context, state) {
              return Text(
                '$state',
                style: Theme.of(context).textTheme.headline4,
              );
            },
          ),
          RaisedButton(
            onPressed: () {
              bloc.add(IncrementEvent());
            },
            child: Text('Increment'),
          ),
        ],
      ),
    );
  }
}

class CounterBloc extends Bloc<IncrementEvent, int> {
  CounterBloc() : super(0);

  @override
  Stream<int> mapEventToState(IncrementEvent event) async* {
    yield state + 1;
  }
}

class IncrementEvent {}

实践案例：点击计数器

使用状态管理库Provider实现一个简单的点击计数器。

示例代码：
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => Counter(),
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Provider Counter Example'),
        ),
        body: CounterWidget(),
      ),
    );
  }
}

class Counter with ChangeNotifier {
  int _counter = 0;

  int get counter => _counter;

  void increment() {
    _counter++;
    notifyListeners();
  }
}

class CounterWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final counter = Provider.of<Counter>(context);

    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text(
            'You have pressed the button this many times:',
          ),
          Text(
            '${counter.counter}',
            style: Theme.of(context).textTheme.headline4,
          ),
          RaisedButton(
            onPressed: () {
              counter.increment();
            },
            child: Text('Increment'),
          ),
        ],
      ),
    );
  }
}

Flutter项目实战

创建简单的待办事项应用

待办事项应用通常包括添加任务、显示任务列表和删除任务等功能。以下是一个简单的待办事项应用示例。

示例代码：
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => TaskList(),
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: TaskListScreen(),
    );
  }
}

class TaskList with ChangeNotifier {
  List<String> _tasks = [];

  List<String> get tasks => _tasks;

  void addTask(String task) {
    _tasks.add(task);
    notifyListeners();
  }

  void removeTask(String task) {
    _tasks.remove(task);
    notifyListeners();
  }
}

class TaskListScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final taskList = Provider.of<TaskList>(context);

    return Scaffold(
      appBar: AppBar(
        title: Text('Task List'),
      ),
      body: Column(
        children: <Widget>[
          Expanded(
            child: ListView.builder(
              itemCount: taskList.tasks.length,
              itemBuilder: (context, index) {
                return ListTile(
                  title: Text(taskList.tasks[index]),
                  trailing: IconButton(
                    icon: Icon(Icons.delete),
                    onPressed: () {
                      taskList.removeTask(taskList.tasks[index]);
                    },
                  ),
                );
              },
            ),
          ),
          TextField(
            decoration: InputDecoration(
              labelText: 'New Task',
              border: OutlineInputBorder(),
            ),
            onSubmitted: (value) {
              taskList.addTask(value);
            },
          ),
        ],
      ),
    );
  }
}

数据持久化：SharedPreferences

数据持久化是应用开发中的重要功能。Flutter提供了SharedPreferences插件来实现本地数据存储。

示例代码：
import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DataPersistenceScreen(),
    );
  }
}

class DataPersistenceScreen extends StatefulWidget {
  @override
  _DataPersistenceScreenState createState() => _DataPersistenceScreenState();
}

class _DataPersistenceScreenState extends State<DataPersistenceScreen> {
  String _storedData = '';

  void _saveData(String data) async {
    final prefs = await SharedPreferences.getInstance();
    prefs.setString('key', data);
  }

  void _loadData() async {
    final prefs = await SharedPreferences.getInstance();
    setState(() {
      _storedData = prefs.getString('key') ?? 'No data';
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Data Persistence Example'),
      ),
      body: Column(
        children: <Widget>[
          TextField(
            decoration: InputDecoration(
              labelText: 'Enter data to save',
              border: OutlineInputBorder(),
            ),
            onSubmitted: (value) {
              _saveData(value);
            },
          ),
          RaisedButton(
            onPressed: _loadData,
            child: Text('Load Data'),
          ),
          Text(_storedData),
        ],
      ),
    );
  }
}

网络请求与数据展示

网络请求是应用开发中的常见操作，可以通过HTTP请求库如http来实现。

示例代码：
import 'package:flutter/material.dart';
import 'dart:convert';
import 'package:http/http.dart' as http;

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: NetworkDataScreen(),
    );
  }
}

class NetworkDataScreen extends StatefulWidget {
  @override
  _NetworkDataScreenState createState() => _NetworkDataScreenState();
}

class _NetworkDataScreenState extends State<NetworkDataScreen> {
  String _response = '';

  void _fetchData() async {
    final response = await http.get('https://jsonplaceholder.typicode.com/todos/1');
    if (response.statusCode == 200) {
      setState(() {
        _response = json.decode(response.body)['title'];
      });
    } else {
      setState(() {
        _response = 'Error fetching data';
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Network Data Example'),
      ),
      body: Column(
        children: <Widget>[
          RaisedButton(
            onPressed: _fetchData,
            child: Text('Fetch Data'),
          ),
          Text(_response),
        ],
      ),
    );
  }
}

UI优化与调试技巧

UI优化主要通过选择合适的组件、合理的布局和样式、代码优化等实现。调试技巧包括使用Flutter DevTools、设置断点、使用日志输出等。

示例代码：
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter DevTools Example',
      home: DevToolsScreen(),
    );
  }
}

class DevToolsScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('DevTools Example'),
      ),
      body: Center(
        child: Text('Use Flutter DevTools for debugging and performance profiling'),
      ),
    );
  }
}

Flutter资源推荐与进阶学习

Flutter官方文档与学习资源

Flutter官方文档提供了完整且详细的教程和指南，非常适合初学者和进阶用户。官方文档包括安装指南、开发指南、API文档等，可以帮助开发者快速上手Flutter开发。此外，Flutter官网还提供了丰富的教程和示例代码，包括视频教程、博客文章和实战项目。

Flutter社区与交流平台

Flutter社区是一个活跃的开发者社区，你可以在这里找到很多开发者交流和分享经验的地方。一些常用的交流平台包括Flutter的GitHub、Stack Overflow、Reddit等。这些平台不仅提供问答服务，还有许多开发者分享自己的实战经验和项目代码。

Flutter插件与第三方库使用

Flutter生态系统中有大量的插件和第三方库，可以帮助你快速构建应用。例如，flutter_launcher_icons用于设置应用图标，flutter_svg用于渲染SVG图形，flutter_local_notifications用于显示本地通知等。

示例代码（使用flutter_launcher_icons插件）：
dependencies:
  flutter_launcher_icons: ^0.9.0

在pubspec.yaml文件中添加插件后，运行以下命令：

flutter pub get
flutter pub run flutter_launcher_icons:main

进阶知识点推荐

  • 动画：理解如何使用AnimatedWidget和AnimationController来实现复杂的动画效果。
  • 自定义组件：学习如何创建和使用自定义组件，提升代码的复用性。
  • 性能优化：了解如何通过代码优化、资源管理等手段提升应用性能。

推荐学习网站：慕课网 提供了大量的Flutter教程和实战项目，非常适合进阶学习。

点击查看更多内容
发表于 2024.10.12 22:35， 共 160 人浏览

本文原创发布于慕课网 ，转载请注明出处，谢谢合作

举报
为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

作者其他优质文章

正在加载中

开心每一天1111

Web前端工程师
手记
篇
粉丝
48
获赞与收藏
218

关注作者，订阅最新文章

阅读免费教程

  • 推荐
  • 评论
  • 收藏
  • 共同学习，写下你的评论
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消