Flutter开发实用指南：从数据传递到界面优化的全方位探索✨

YANKEESEAN

已于 2023-12-13 17:14:23 修改

阅读量898

点赞数 23

文章标签： flutter javascript 前端前端框架开发语言

于 2023-12-13 16:24:44 首次发布

本文链接：https://blog.csdn.net/2301_79918699/article/details/134974707

版权

前言 🚀：

这篇博客涵盖了Flutter应用程序中的多个关键主题，包括路由传递数据、日期格式化、加载器/旋转器、三元操作符以及使用ListView Builder创建动态列表和异步操作。通过清晰的代码片段和详细的说明，你们可以轻松理解并应用这些概念到自己的Flutter项目中。

传递路由数据 🚀⌛

重定向到主页 🏠:

在应用程序启动时，加载屏幕是第一个加载的小部件。
移除加载屏幕中处理时间数据的代码，包括状态设置和时间输出的部分。
使用Navigator对象的pushReplacementNamed方法进行路由重定向，传递上下文对象和目标路由的名称。

Navigator.pushReplacementNamed(context, '/home');

传递数据到主页 📤:

使用pushReplacementNamed方法进行重定向，确保主页覆盖加载屏幕而不是堆叠在其上。
介绍pushReplacementNamed方法，该方法替换了当前路由下的所有路由。
使用arguments参数传递数据，该参数是一个包含要传递的键值对的映射。

// 使用pushReplacementNamed传递数据的代码
Navigator.pushReplacementNamed(
  context,
  '/home',
  arguments: {
    'location': instance.location,
    'flag': instance.flag,
    'time': instance.time,
  },
);

在主页中接收数据 📥:

在主页的State对象中声明一个变量来存储接收到的数据。
在build方法中使用ModalRoute.of(context).settings.arguments来获取传递的参数。
更新数据变量并在下面的小部件树中使用。

class HomeScreenState extends State<HomeScreen> {
  Map<String, dynamic> data = {};

  @override
  Widget build(BuildContext context) {
    data = ModalRoute.of(context).settings.arguments as Map<String, dynamic>;
    
    // ... 其他代码 ...
  }
}

打印接收到的数据 🖨️:

在build方法中打印接收到的数据，以确保数据已成功传递。
说明此处不需要使用setState，因为build方法首次运行时即可访问传递的数据。

@override
Widget build(BuildContext context) {
  data = ModalRoute.of(context).settings.arguments as Map<String, dynamic>;
  print(data);

  // ... 其他代码 ...
}

以下是带有emoji的完整Markdown片段：

# 格式化和显示日期 💻📅

## 安装intl包 📦:

- 在pubspec.yaml文件中添加intl依赖。
- 使用`flutter pub get`命令安装依赖包.

```yaml
dependencies:
  # ... Other dependencies ...
  intl: ^0.17.0

使用intl包进行日期格式化 🕰️:

导入intl包。
使用DateFormat类提供的format方法进行日期格式化.

import 'package:intl/intl.dart';

// ...

String formattedDate = DateFormat('jm').format(now);

在主屏幕中输出格式化后的时间 ⏰:

在主屏幕的widget tree中使用格式化后的时间进行输出.

更新主屏幕的布局 🎨:

添加SizedBox和Row小部件，用于在时间下方显示地点和国旗图标.
对文本小部件应用样式，设置字体大小和字母间距.

SizedBox(height: 20),
Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Text(
      data['location'],
      style: TextStyle(fontSize: 28, letterSpacing: 2),
    ),
    // ... 其他代码 ...
  ],
),
SizedBox(height: 20),
Text(
  formattedDate,
  style: TextStyle(fontSize: 66),
),

加载器/旋转器 🔄

引入Flutter Spin Kit包 🌀:

使用flutter_spin_kit包，该包提供了多种旋转器样式.
在pubspec.yaml文件中添加依赖.
运行flutter pub get以获取依赖.

dependencies:
  flutter_spin_kit: ^5.0.0

创建加载屏幕 🔄:

移除原本的加载文本和padding.
使用SpinKitFadingCube，设置颜色为白色，大小为50.0.

import 'package:flutter_spin_kit/flutter_spin_kit.dart';

class LoadingScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blue,
      body: Center(
        child: SpinKitFadingCube(
          color: Colors.white,
          size: 50.0,
        ),
      ),
    );
  }
}

更换旋转器样式 🎡:

在flutter_spin_kit包中选择不同的旋转器样式，如SpinKitCubeGrid，SpinKitRotatingCircle等.

调整加载时间 ⌛:

通过注释掉导航到下一页的部分，可以延长加载屏幕的展示时间，方便预览效果.

阅读文档和自定义 📚:

访问Flutter Spin Kit包文档以了解如何自定义旋转器的外观和行为.

三元操作符 🌗

创建`isDayTime`属性 ☀️🌙：

在WorldTime类中创建一个isDayTime属性，用于存储白天或黑夜的状态（true表示白天，false表示黑夜）。

bool isDayTime = true; // true for day, false for night

使用三元操作符确定白天或黑夜 ⏰：

使用三元操作符，根据当前时间判断是白天还是黑夜，并设置isDayTime的值。

isDayTime = now.hour > 6 && now.hour < 20 ? true : false;

传递`isDayTime`到主屏幕 🌈：

在加载屏幕中，将isDayTime属性传递到主屏幕。

Navigator.pushReplacementNamed(context, '/home', arguments: {
  'location': instance.location,
  'flag': instance.flag,
  'time': instance.time,
  'isDayTime': isDayTime,
});

# 三元操作符 🌗

## **创建`isDayTime`属性 ☀️🌙：**

- 在`WorldTime`类中创建一个`isDayTime`属性，用于存储白天或黑夜的状态（`true`表示白天，`false`表示黑夜）。

```dart
bool isDayTime = true; // true for day, false for night

使用三元操作符确定白天或黑夜 ⏰：

使用三元操作符，根据当前时间判断是白天还是黑夜，并设置isDayTime的值。

isDayTime = now.hour > 6 && now.hour < 20 ? true : false;

传递`isDayTime`到主屏幕 🌈：

在加载屏幕中，将isDayTime属性传递到主屏幕。

Navigator.pushReplacementNamed(context, '/home', arguments: {
  'location': instance.location,
  'flag': instance.flag,
  'time': instance.time,
  'isDayTime': isDayTime,
});

在主屏幕中使用`isDayTime` 🌅🌃

设置背景图像和颜色 🖼️🎨：

在主屏幕中，使用isDayTime属性来确定应该显示哪个背景图像和应用哪种背景颜色。

// 设置背景图像
String bgImage = isDayTime ? 'day.png' : 'night.png';

// 设置背景颜色
Color bgColor = isDayTime ? Colors.blue : Colors.indigo[700];

// 应用背景图像和颜色
Scaffold(
  backgroundColor: bgColor,
  body: Container(
    decoration: BoxDecoration(
      image: DecorationImage(
        image: AssetImage('assets/$bgImage'),
        fit: BoxFit.cover,
      ),
    ),
    // 其余部分的代码...
  ),
)

更改图标和文本颜色 🎨📝：

根据白天或黑夜的状态，调整图标和文本的颜色，使其在不同背景下更易于辨认。

// 图标颜色
Icon(
  Icons.edit_location,
  color: isDayTime ? Colors.grey[300] : Colors.grey[100],
)

// 文本颜色
Text(
  'Choose Location',
  style: TextStyle(
    color: isDayTime ? Colors.grey[300] : Colors.grey[100],
  ),
)

ListView Builder 📋👷

导入世界时间（WorldTime）类 🌍🕰️：

在choose_location.dart文件中导入世界时间服务文件，以便可以使用WorldTime类。

import 'package:world_time/services/world_time.dart';

创建位置数据列表 🌐📊：

在choose_location.dart文件中定义一个包含不同位置的数据列表。这里使用了WorldTime类的实例，并设置了位置、URL和国旗信息。

List<WorldTime> locations = [
  WorldTime(url: 'Europe/London', location: 'London', flag: 'uk.png'),
  WorldTime(url: 'Europe/Berlin', location: 'Berlin', flag: 'germany.png'),
  // Add more locations...
];

使用ListView Builder创建动态列表 📝🔄：

在body属性中使用ListView.builder创建一个动态列表。该列表会根据数据源（locations列表）动态生成位置卡片。

body: ListView.builder(
  itemCount: locations.length,
  itemBuilder: (context, index) {
    return Padding(
      padding: EdgeInsets.symmetric(vertical: 1.0, horizontal: 4.0),
      child: Card(
        child: ListTile(
          onTap: () {
            print('${locations[index].location} tapped');
          },
          title: Text(locations[index].location),
          leading: CircleAvatar(
            backgroundImage: AssetImage('assets/${locations[index].flag}'),
          ),
        ),
      ),
    );
  },
),

在点击位置时打印信息 🖱️🖨️：

在onTap回调函数中，通过打印输出选择的位置信息，以验证点击事件是否正常工作。

onTap: () {
  print('${locations[index].location} tapped');
},

导航到主屏幕并更新数据 🚀🔄：

在点击位置后，计划通过Navigator导航回主屏幕并更新数据。这将在下一个教程中实现。

onTap: () {
  Navigator.pop(context, {
    'location': locations[index].location,
    'flag': locations[index].flag,
    'url': locations[index].url,
  });
},

更新时间 ⏰🔄

定义更新时间函数 🕰️🔧：

在choose_location.dart文件中定义了一个异步函数updateTime，该函数接收一个index参数，代表用户选择的位置的索引。

void updateTime(int index) async {
  WorldTime instance = locations[index];
  await instance.getTime();
  // Navigate back to home screen and pass the updated data.
  Navigator.pop(context, {
    'location': instance.location,
    'flag': instance.flag,
    'url': instance.url,
    'time': instance.time,
    'isDaytime': instance.isDaytime,
  });
}

在点击位置时调用更新时间函数 🖱️🔄：

在onTap回调函数中，调用了刚定义的updateTime函数，并传递当前位置的索引。

onTap: () {
  updateTime(index);
},

异步任务和等待 ⏳💤：

使用await关键字等待getTime方法完成，确保在获取新数据后再执行后续代码。

await instance.getTime();

通过`Navigator.pop`返回数据 🔙📤：

使用Navigator.pop返回到主屏幕，并传递更新的数据作为参数。

Navigator.pop(context, {
  'location': instance.location,
  'flag': instance.flag,
  'url': instance.url,


  'time': instance.time,
  'isDaytime': instance.isDaytime,
});

在主屏幕使用`setState`更新状态 🔄🔍：

在主屏幕接收到返回的数据后，使用setState更新小部件的状态，确保重新构建并显示新的数据。

setState(() {
  data = {
    'location': result['location'],
    'flag': result['flag'],
    'time': result['time'],
    'isDaytime': result['isDaytime'],
  };
});

检查数据是否为空 ❓🔍：

在使用setState更新状态之前，通过isNotEmpty方法检查数据是否为空，避免覆盖已更新的数据。

data.isNotEmpty ? data : result;

结语：

Flutter是一个强大而灵活的框架，能够构建出漂亮、高性能的移动应用。这篇文章所覆盖的主题展示了如何在Flutter应用程序中实现常见的功能和交互。阅读者可以将这些代码片段作为学习的起点，进一步深入研究Flutter的更多功能和最佳实践，以构建出更加复杂和出色的应用程序。

无论是初学者还是有经验的Flutter开发者，都可以通过这篇博客加深对Flutter核心概念的理解，并且从中获取一些实用的编程技巧。祝愿大家在Flutter开发的旅程中取得成功，构建出令人印象深刻的应用程序！ 🚀✨

YANKEESEAN

关注

23
点赞
踩
19

收藏

觉得还不错? 一键收藏
1
评论
Flutter开发实用指南：从数据传递到界面优化的全方位探索✨

该博客涵盖了Flutter应用开发的关键主题，包括路由传递数据、日期格式化、加载器、三元操作符，以及使用ListView Builder创建动态列表和异步操作。读者将学到如何优雅地传递数据、格式化日期、提升用户体验、优化代码，以及展示动态数据的方法。通过清晰的代码片段和详细的说明，本博客为初学者和有经验的Flutter开发者提供实用的编程技巧。这篇综合指南将帮助读者深入理解Flutter核心概念，构建更美丽、响应性的移动应用。
复制链接

扫一扫