1. 首页
  2. 分类
  3. 所有
flutter开发实战-本地SQLite数据存储
System
2024-08-23
所有,flutter



import 'package:flutter/services.dart';
import 'package:sqflite/sqflite.dart';
import 'package:path/path.dart';
 
class DatabaseHelper {
  static DatabaseHelper _databaseHelper;
  static Database _database;
 
  DatabaseHelper._createInstance();
 
  factory DatabaseHelper() {
    if (_databaseHelper == null) {
      _databaseHelper = DatabaseHelper._createInstance();
    }
    return _databaseHelper;
  }
 
  Future<Database> openDatabase() async {
    if (_database == null) {
      _database = await initializeDatabase();
    }
    return _database;
  }
 
  Future<Database> initializeDatabase() async {
    // 获取数据库路径
    var databasePath = await getDatabasesPath();
    var path = join(databasePath, 'my_database.db');
 
    // 打开或创建数据库
    var database = await openDatabase(path, version: 1, onCreate: _createDb);
    return database;
  }
 
  void _createDb(Database db, int version) async {
    const String createTableSql = '''
    CREATE TABLE my_table (
      id INTEGER PRIMARY KEY,
      name TEXT,
      value TEXT
    )
    ''';
 
    await db.execute(createTableSql);
  }
 
  // 插入数据
  Future<int> insertData(String name, String value) async {
    Database db = await this.openDatabase();
    var rawInsert = 'INSERT INTO my_table (name, value) VALUES (?, ?)';
    int id = await db.rawInsert(rawInsert, [name, value]);
    return id;
  }
 
  // 查询数据
  Future<List<Map<String, dynamic>>> queryData() async {
    Database db = await this.openDatabase();
    var rawQuery = 'SELECT * FROM my_table';
    List<Map<String, dynamic>> result = await db.rawQuery(rawQuery);
    return result;
  }
 
  // 更新数据
  Future<int> updateData(int id, String name, String value) async {
    Database db = await this.openDatabase();
    var rawUpdate = 'UPDATE my_table SET name = ?, value = ? WHERE id = ?';
    int result = await db.rawUpdate(rawUpdate, [name, value, id]);
    return result;
  }
 
  // 删除数据
  Future<int> deleteData(int id) async {
    Database db = await this.openDatabase();
    var rawDelete = 'DELETE FROM my_table
- 阅读更多 -
flutter动画不流畅，android面试笔试题目
System
2024-08-23
所有,flutter

这个问题描述的是在Android应用开发中，使用Flutter框架进行动画开发时，遇到的动画不流畅的问题。这个问题可能是因为动画的帧率不够流畅，或者动画在渲染时出现了问题。

解释:

Flutter中的动画通常是通过AnimationController和Tween来实现的。如果动画看起来不流畅，可能是因为动画的帧率（FPS）不够，或者动画在执行时出现了卡顿现象。

解决方法:

  1. 检查动画的duration和curve设置，确保它们适合你的动画需求。
  2. 使用TickerProviderStateMixin来增加动画的帧率。这可以通过在State类中实现TickerProvider接口来实现，并使用Ticker来更新动画状态。
  3. 确保你的动画不会在每个帧上做过多的计算或者布局重建，这会导致动画不流畅。
  4. 使用RepaintBoundary或CustomPaint等widgets来确保动画的流畅性。
  5. 如果可能，使用flutter提供的AnimatedWidget或者ImplicitAnimations来简化动画的实现。
  6. 使用Profile GPU Rendering工具来分析GPU的使用情况，确保没有性能瓶颈。
  7. 如果是在Android设备上出现问题，确保设备的硬件加速是开启的。

在实际的面试中，你可能需要提供一个简短的代码示例，说明如何使用TickerProviderStateMixin来提高动画的流畅度，或者说明如何优化你的动画代码来提高性能。

- 阅读更多 -
【Linux】对信号产生的内核级理解
System
2024-08-23
所有,linux

信号是进程间通信的一种简单方式，它将有限的信息量传递给进程。在Linux中，信号是由内核产生并发送给进程的。

以下是一些常见的信号：

  1. SIGHUP：当终端断开时，用户会话头挂断信号。
  2. SIGINT：当用户按下Ctrl+C时，程序会接收到中断信号。
  3. SIGKILL：无法被处理、忽略或者阻塞，通常用于强制终止进程。
  4. SIGTERM：程序结束(terminate)信号，默认行为是结束进程。
  5. SIGCHLD：当子进程改变状态时，父进程会收到这个信号。

内核如何产生信号：

  1. 硬件异常产生信号：如除以0、无效的内存访问。
  2. 软件中断产生信号：如alarm定时器到时，会产生SIGALRM信号。
  3. 进程运行错误产生信号：如一个进程调用了kill函数，向其他进程发送信号。
  4. 用户态程序请求产生信号：如kill命令。

如果你想要在内核中理解信号的产生和处理，你可以查看内核源代码中的signal.c或者sigqueue.c文件。这些文件包含了信号的初始化代码和处理函数。

以下是一个简单的用户空间代码示例，用于捕获并处理信号：




#include <stdio.h>
#include <signal.h>
#include <unistd.h>
 
void handle_sigint(int sig) {
    printf("Caught SIGINT, signum = %d\n", sig);
}
 
int main() {
    struct sigaction sa;
    sa.sa_handler = &handle_sigint;
    sa.sa_flags = 0;
    sigemptyset(&sa.sa_mask);
    sigaction(SIGINT, &sa, NULL);
 
    while(1) {
        printf("Waiting for SIGINT...\n");
        pause(); // 暂停进程直到信号到来
    }
 
    return 0;
}

这段代码设置了一个信号处理函数handle_sigint来处理SIGINT信号（当用户按下Ctrl+C时产生）。程序会一直循环等待这个信号，一旦信号到来，就会调用handle_sigint函数来处理。

- 阅读更多 -
Flutter适配深色模式（DarkMode）
System
2024-08-23
所有,flutter

在Flutter中适配深色模式，你可以使用ThemeMode来控制应用的主题模式，并使用MaterialApp的theme和darkTheme属性来定义不同模式下的主题。以下是一个简单的示例：




import 'package:flutter/material.dart';
 
void main() {
  runApp(MyApp());
}
 
class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      darkTheme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
        brightness: Brightness.dark,
      ),
      themeMode: ThemeMode.system, // 使用系统主题
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}
 
class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
 
  final String title;
 
  @override
  _MyHomePageState createState() => _MyHomePageState();
}
 
class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Text('Hello, World!'),
      ),
    );
  }
}

在这个示例中，我们定义了一个darkTheme并将其brightness属性设置为Brightness.dark，以此来创建一个深色主题。然后，我们将themeMode设置为ThemeMode.system，这样应用会根据系统设置自动切换主题模式。如果你想要强制使用特定的主题模式，你也可以将themeMode设置为ThemeMode.light或ThemeMode.dark。

- 阅读更多 -
Flutter核心原理
System
2024-08-23
所有,flutter

Flutter是一个开源的UI工具包，它可以快速在iOS和Android上构建高质量的原生用户界面。Flutter的核心原理主要包括以下几点：

  1. 使用Dart作为编程语言，它是一种由Google开发的、用于web，服务器，移动应用的等各种平台的语言。
  2. 使用GPU渲染引擎来加速渲染，这使得Flutter在一些场景下比HTML5等要有更好的性能。
  3. 使用Dart的future和stream等异步机制来处理异步任务。
  4. 使用widget作为基本的UI构建单元，并且每一次的UI更新都是setState，Flutter会自动比对新旧widget树的差异，并进行最小化的UI更新。
  5. 使用hot reload来加速开发进程，修改后的代码或者资源可以即时更新到设备上，无需重新编译打包。

以下是一个简单的Flutter应用示例代码：




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('Flutter Demo'),
        ),
        body: Center(
          child: Text('Hello, World!'),
        ),
      ),
    );
  }
}

这段代码创建了一个简单的Flutter应用，其中使用了StatelessWidget来定义一个无状态的组件，并在其build方法中定义了用户界面。这个应用有一个标题栏，一个文本显示“Hello, World!”。这是Flutter开发的基本入门，展示了Flutter的核心原理和开发方式。

- 阅读更多 -
[Flutter]倒计时和计时器
System
2024-08-23
所有,flutter

在Flutter中，你可以使用Timer类来实现倒计时功能，并使用StatefulWidget来更新界面。以下是一个简单的倒计时示例：




import 'package:flutter/material.dart';
import 'dart:async';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: CountdownTimerPage(),
    );
  }
}
 
class CountdownTimerPage extends StatefulWidget {
  @override
  _CountdownTimerPageState createState() => _CountdownTimerPageState();
}
 
class _CountdownTimerPageState extends State<CountdownTimerPage> {
  Timer _timer;
  int _secondsRemaining = 10;
 
  @override
  void initState() {
    super.initState();
    _startTimer();
  }
 
  @override
  void dispose() {
    _timer?.cancel();
    super.dispose();
  }
 
  void _startTimer() {
    const oneSec = const Duration(seconds: 1);
    _timer = Timer.periodic(oneSec, (Timer timer) {
      if (_secondsRemaining < 1) {
        timer.cancel();
        _secondsRemaining = 0;
      } else {
        setState(() {
          _secondsRemaining--;
        });
      }
    });
  }
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text(
          _secondsRemaining > 0 ? '$_secondsRemaining' : 'Finished',
          style: Theme.of(context).textTheme.display1,
        ),
      ),
    );
  }
}

这段代码创建了一个倒计时器，初始化时间为10秒。当倒计时结束时，计时器取消。你可以通过修改_secondsRemaining的值来设置你需要的倒计时时间。这个例子也展示了如何在Flutter中使用StatefulWidget来处理计时器和状态更新。

- 阅读更多 -
【Flutter桌面篇】Flutter&Windows应用尝鲜
System
2024-08-23
所有,flutter

在Windows上运行Flutter & Desktop应用程序可能会遇到各种问题，包括依赖项问题、编译错误和运行时错误。以下是一些常见的问题和解决方案：

  1. 确保系统满足Flutter桌面应用程序的要求：

    • 确保你的Windows系统是64位的。
    • 安装最新版本的Visual Studio和C++构建工具。

  2. 安装并配置正确的Flutter channel：

    • 运行flutter channel查看当前的channel。
    • 如果不是stable，请切换到stable通道：flutter channel stable。

  3. 更新你的Flutter SDK：

    • 运行flutter upgrade以确保你的Flutter SDK是最新的。

  4. 运行flutter doctor以检查任何潜在的问题：

    • 这可以帮助你确认所有依赖项是否都已正确安装。

  5. 确保你的项目中的pubspec.yaml文件中的依赖项是最新的：

    • 运行flutter pub get以确保所有依赖项都是最新的。
  6. 如果你遇到编译错误，请检查错误信息并根据需要更新你的代码。

  7. 如果你的应用程序无法在Windows上运行，请尝试清理项目：

    • 运行flutter clean清理构建文件。
  8. 如果问题依然存在，尝试重启你的电脑。

  9. 查看官方文档和社区支持：

    • 访问Flutter官方网站获取最新的信息和指导。
    • 在Stack Overflow或者Flutter社区提问，可能会有人遇到相同的问题并找到解决方案。
  10. 如果可能，尝试在一个新的Flutter项目上运行桌面应用程序，以确定问题是否特定于你的项目。

如果你遵循了上述步骤，但问题依然存在，可能需要提供更具体的错误信息或者代码示例来进行更深入的分析和解决。

- 阅读更多 -
Flutter windows 环境配置
System
2024-08-23
所有,flutter

在Windows环境下配置Flutter环境，您需要按照以下步骤操作：

  1. 下载Flutter SDK：访问Flutter官网下载页面(https://flutter.dev/docs/get-start�alized/install)，下载适合您操作系统的安装包。
  2. 解压缩Flutter压缩包到您希望安装Flutter SDK的目录。

  3. 配置环境变量：

    • 将Flutter SDK的bin目录添加到PATH环境变量中。
    • 设置环境变量PUB_HOSTED_URL为https://pub.flutter-io.cn （中国大陆开发者需要设置，以使用阿里巴巴在中国的镜像）。
    • 设置环境变量FLUTTER_STORAGE_BASE_URL为https://storage.flutter-io.cn （中国大陆开发者需要设置，以使用阿里巴巴在中国的镜像）。
  4. 运行flutter doctor命令来检查是否需要安装其他依赖，比如Visual Studio等。
  5. 如果您使用的是Visual Studio，可能需要安装Desktop开发组件。

以下是配置环境变量的示例（以Powershell为例）：




# 设置Flutter SDK路径
$flutterDir = "C:\flutter" # 替换为您的Flutter SDK目录
 
# 添加Flutter SDK的bin目录到PATH环境变量
$env:PATH += ";$flutterDir\bin"
 
# 设置PUB_HOSTED_URL和FLUTTER_STORAGE_BASE_URL环境变量
$env:PUB_HOSTED_URL = "https://pub.flutter-io.cn"
$env:FLUTTER_STORAGE_BASE_URL = "https://storage.flutter-io.cn"

确保将上述代码中的路径替换为您实际的Flutter SDK路径。

以上步骤完成后，您可以打开一个新的命令行窗口或PowerShell窗口，输入flutter doctor来检查是否已正确配置Flutter环境。

- 阅读更多 -
18分钟轻松入门flutter，腾讯T3团队整理，带你摇身一变大前端
System
2024-08-23
所有,flutter

在这个Flutter系列中，我们将会教你如何使用Flutter来构建一个简单的应用程序。我们将会涵盖基础的widget、导航、状态管理等内容。

安装Flutter

首先，你需要在你的机器上安装Flutter SDK。你可以从Flutter官网下载安装包并遵循安装说明。

创建你的第一个Flutter应用

打开终端或命令提示符，运行以下命令来创建一个新的Flutter项目：




flutter create my_first_flutter_app

这将会创建一个名为my_first_flutter_app的新项目。

运行你的应用

在终端或命令提示符中，导航到你的项目目录，并运行以下命令来启动模拟器或连接的设备：




flutter devices

然后运行以下命令来启动你的应用：




flutter run

编写你的第一个Flutter页面

打开lib/main.dart文件，并用以下代码替换自动生成的代码：




import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}
 
class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter 入门示例'),
      ),
      body: Center(
        child: Text('Hello, Flutter!'),
      ),
    );
  }
}

这个简单的应用程序创建了一个包含一个AppBar和一个在屏幕中心显示文本的页面。

测试和调试

Flutter提供了一个强大的开发环境，包括一个内置的调试器和一个可视化的布局查看器。使用这些工具，你可以在开发过程中快速地测试和调试你的应用程序。

结束语

在这个简短的教程中，你已经学会了如何安装Flutter，创建一个新的项目，以及如何运行和测试你的第一个Flutter应用程序。下一步，你可以开始探索Flutter的更多功能，如widget、布局和导航。

- 阅读更多 -
Flutter 中 Stack 的使用详解（内含对比图） _ Flutter Widgets
System
2024-08-23
所有,flutter

在Flutter中，Stack是一个用于叠加widget的控件。它按照子widget的顺序将它们堆叠起来，可以通过Positioned来定位。

下面是一个使用Stack和Positioned的例子：




Stack(
  children: <Widget>[
    Container(
      width: 200.0,
      height: 200.0,
      color: Colors.red,
    ),
    Positioned(
      top: 20.0,
      left: 20.0,
      child: Container(
        width: 160.0,
        height: 160.0,
        color: Colors.blue,
      ),
    ),
    Positioned(
      bottom: 20.0,
      right: 20.0,
      child: Container(
        width: 160.0,
        height: 160.0,
        color: Colors.yellow,
      ),
    ),
  ],
)

在这个例子中，我们先创建了一个红色的正方形Container作为背景。然后使用Positioned将一个蓝色的正方形Container放在左上角，又使用Positioned将一个黄色的正方形Container放在右下角。

这个例子展示了如何使用Stack和Positioned来进行布局，这是在开发中经常会用到的一个组合。

- 阅读更多 -
Copyright © 2026 Tech Blog
All Right Reserved | 京ICP备19053165号