分类 flutter 下的文章

2024-08-23

在Flutter中，可以通过Navigator进行页面间的路由跳转，并可以封装一些常用的方法来简化页面跳转和处理。

以下是一个简单的路由跳转和封装示例：

import 'package:flutter/material.dart';

class NavigationService {
  final GlobalKey<NavigatorState> navigatorKey = GlobalKey<NavigatorState>();

  // 获取NavigatorState对象
  NavigatorState get navigator => navigatorKey.currentState;

  // 页面跳转
  Future<dynamic> push(BuildContext context, Widget route) {
    return navigator.push(MaterialPageRoute(builder: (context) => route));
  }

  // 带有返回值的页面跳转
  Future<T> pushForResult<T>(BuildContext context, Widget route) {
    return navigator.push<T>(MaterialPageRoute(builder: (context) => route));
  }

  // 关闭当前页面，返回上一个页面
  Future<bool> pop(BuildContext context, [bool result]) {
    if (result != null) {
      return navigator.pop(result);
    } else {
      return navigator.pop();
    }
  }

  // 弹窗
  void showDialog<T>({
    @required BuildContext context,
    @required WidgetBuilder builder,
  }) {
    showDialog(
      context: context,
      builder: (context) => builder(context),
    );
  }
}

使用方法：

final NavigationService _navigationService = NavigationService();

// 页面跳转
_navigationService.push(context, YourPage());

// 带有返回值的页面跳转
_navigationService.pushForResult<bool>(context, YourPage()).then((result) {
  if (result != null) {
    print('返回结果: $result');
  }
});

// 关闭当前页面
_navigationService.pop(context, true); // 返回true

// 弹窗
_navigationService.showDialog<bool>(
  context: context,
  builder: (context) => YourDialog(),
);

在这个示例中，我们创建了一个名为NavigationService的类，它包含了获取NavigatorState对象的方法、页面跳转的方法、带返回值的页面跳转方法、关闭页面的方法以及弹窗的方法。这样可以方便地在应用中重用这些方法，并使页面跳转和处理更加集中和简洁。

- 阅读更多 -

Flutter_bloc框架使用笔记，后续估计都不太会用了

System

2024-08-23

所有,flutter

在Flutter应用中，我们可以使用bloc库来管理状态。bloc是一个状态管理的库，它通过组合cubit和stream来管理状态。

在Flutter\_bloc框架中，我们可以使用BlocBuilder和BlocProvider来构建我们的应用。

BlocBuilder是一个Widget，它会自动订阅Bloc并在状态改变时重新渲染。

BlocProvider是一个Widget，它提供了一个Bloc给其子Widget。

以下是一些示例代码：

创建一个Cubit：

class CounterCubit extends Cubit<int> {
  CounterCubit() : super(0);

  void increment() => emit(state + 1);
}

使用BlocProvider在应用中提供Bloc：

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

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

使用BlocBuilder来响应状态的变化：

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: BlocBuilder<CounterCubit, int>(
          builder: (context, state) {
            return Text('$state');
          },
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => context.read<CounterCubit>().increment(),
        child: Icon(Icons.add),
      ),
    );
  }
}

在上述代码中，我们创建了一个CounterCubit，它管理着一个整数状态。我们使用BlocProvider在应用的根部提供了这个Cubit。然后在HomePage中，我们使用BlocBuilder来显示状态，并且使用FloatingActionButton来触发Cubit的increment方法，从而改变状态。当状态改变时，BlocBuilder会重新构建，显示出最新的状态值。

以上就是使用Flutter\_bloc框架的一个基本例子。这个框架提供了一种管理状态和响应变化的方法，使得构建响应式、可测试的UI变得更加简单和高效。

System

2024-08-23

所有,flutter

import 'package:flutter/material.dart';

class SlidableDismissibleListView extends StatefulWidget {
  @override
  _SlidableDismissibleListViewState createState() => _SlidableDismissibleListViewState();
}

class _SlidableDismissibleListViewState extends State<SlidableDismissibleListView> {
  final items = List<String>.generate(30, (i) => 'Item ${i + 1}');

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: items.length,
      itemBuilder: (context, index) {
        final item = items[index];
        return Dismissible(
          key: ValueKey(item),
          onDismissed: (direction) {
            setState(() {
              items.removeAt(index);
            });
          },
          child: Slidable(
            actionPane: SlidableDrawerActionPane(),
            actionExtentRatio: 0.25,
            child: ListTile(title: Text(item)),
            actions: <Widget>[
              IconSlideAction(
                icon: Icons.delete,
                color: Colors.red,
                onTap: () {},
              ),
              IconSlideAction(
                icon: Icons.archive,
                color: Colors.blue,
                onTap: () {},
              ),
            ],
          ),
        );
      },
    );
  }
}

这个代码实例展示了如何在Flutter中结合使用Dismissible和Slidable组件，实现一个可以通过滑动来删除列表项的列表。Dismissible负责处理滑动事件，而Slidable负责显示滑出后可进行的操作按钮。这个例子简洁明了，并且使用了ListView.builder来优化长列表的性能。

- 阅读更多 -

Flutter入门：TextField（输入框）

System

2024-08-23

所有,flutter

在Flutter中，TextField是一个非常常用的控件，用于创建可以输入文本的控件。以下是一个简单的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: Center(
          child: Container(
            width: 300,
            child: Column(
              children: <Widget>[
                TextField(
                  decoration: InputDecoration(
                    hintText: 'Enter your username',
                    border: OutlineInputBorder(),
                  ),
                ),
                SizedBox(height: 20), // 空间
                TextField(
                  obscureText: true, // 密码字段
                  decoration: InputDecoration(
                    hintText: 'Enter your password',
                    border: OutlineInputBorder(),
                    suffixIcon: Icon(Icons.lock),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

这段代码创建了一个包含两个TextField的页面，第一个用于输入用户名，第二个用于输入密码，并且第二个是密码字段，其中输入的文本会被星号等符号替代。这是一个简单的输入框的使用示例。

- 阅读更多 -

Flutter 导航：页面跳转与路由管理

System

2024-08-23

所有,flutter

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      initialRoute: '/',
      routes: {
        '/': (context) => HomePage(),
        '/about': (context) => AboutPage(),
        '/settings': (context) => SettingsPage(),
      },
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('主页'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('关于'),
          onPressed: () => Navigator.pushNamed(context, '/about'),
        ),
      ),
    );
  }
}

class AboutPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('关于'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('设置'),
          onPressed: () => Navigator.pushNamed(context, '/settings'),
        ),
      ),
    );
  }
}

class SettingsPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('设置'),
      ),
      body: Center(
        child: Text('设置页面'),
      ),
    );
  }
}

这段代码展示了如何在Flutter中使用命名路由进行页面跳转。首先，在MaterialApp中定义了初始路由以及一个包含多个命名路由的映射。然后，在各个页面中通过Navigator.pushNamed方法来跳转到指定的页面。这是一个简单的例子，展示了如何在实际应用中管理和切换不同的页面。

- 阅读更多 -

Flutter - APP跳转高德、百度、腾讯、谷歌地图

System

2024-08-23

所有,flutter

在Flutter中，要实现APP跳转到高德、百度、腾讯或Google地图，你可以使用url_launcher插件。以下是跳转到高德、百度、腾讯和Google地图的示例代码：

首先，在pubspec.yaml中添加依赖：

dependencies:
  flutter:
    sdk: flutter
  url_launcher: ^6.0.16

然后，使用canLaunch和launch方法来打开对应的地图：

import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // 高德地图
  String getAmapUrl(double lat, double lon, String name) {
    return 'androidamap://navi?sourceApplication=$name&lat=$lat&lon=$lon&dev=0&style=2';
  }

  // 百度地图
  String getBaiduUrl(double lat, double lon, String name) {
    return 'baidumap://map/direction?origin=name:$name|latlng=Current Location|drive|latlng=$lat,$lon';
  }

  // 腾讯地图
  String getTencentUrl(double lat, double lon, String name) {
    return 'qqmap://map/routeplan?type=drive&fromname=$name&fromcoord=$lat,$lon&tocoord=$lat,$lon&toname=$name';
  }

  // Google地图
  String getGoogleUrl(double lat, double lon, String name) {
    return 'comgooglemaps://?center=$lat,$lon&zoom=14&views=traffic&q=$name';
  }

  // 跳转方法
  _launchMapsUrl(String url) async {
    if (await canLaunch(url)) {
      await launch(url);
    } else {
      throw 'Could not launch $url';
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('地图跳转示例'),
        ),
        body: Center(
          child: Column(
            children: <Widget>[
              RaisedButton(
                child: Text('高德地图'),
                onPressed: () => _launchMapsUrl(getAmapUrl(39.990452, 116.481476, '我的位置')),
              ),
              RaisedButton(
                child: Text('百度地图'),
                onPressed: () => _launchMapsUrl(getBaiduUrl(39.990452, 116.481476, '我的位置')),
              ),
              RaisedButton(
                child: Text('腾讯地图'),
                onPressed: () => _launchMapsUrl(getTencentUrl(39.990452, 116.481476, '我的位置')),
              ),
              RaisedButton(
                child: Text('Google地图'),
                onPressed: () => _launchMapsUrl(getGoogleUrl(39.990452, 116.481476, '我的位置')),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

请注意，这些URL可能会随着应用版本而变化，并且不同的地图应用可能需要特定的URL格式或参数，所以你可能需要查看相应的地图应用文档以获取最新的URL格式。此外，用户设备上需要安装对应的地图应用。如果用户未安装相应的应用，launch方法将

- 阅读更多 -

Flutter：ExpansionTile 示例，不愧是Alibaba技术官

System

2024-08-23

所有,flutter

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

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

class ExpansionTileExample extends StatefulWidget {
  @override
  _ExpansionTileExampleState createState() => _ExpansionTileExampleState();
}

class _ExpansionTileExampleState extends State<ExpansionTileExample> {
  bool isExpanded = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ExpansionTile(
          title: Text('点击我进行展开/折叠'),
          children: <Widget>[
            ListTile(
              title: Text('这是一个子列表项'),
            ),
            ListTile(
              title: Text('这是另一个子列表项'),
            ),
          ],
          onExpansionChanged: (bool isExpanded) {
            setState(() {
              this.isExpanded = isExpanded;
            });
          },
        ),
      ),
    );
  }
}

这段代码创建了一个简单的ExpansionTile示例，当用户点击标题栏时，会展开或折叠列表。通过onExpansionChanged回调，我们可以跟踪ExpansionTile的展开状态，并对其进行相应的处理。这是一个很好的学习示例，展示了如何在Flutter中使用这个控件。

- 阅读更多 -

Flutter开发之——AndroidView

System

2024-08-23

所有,flutter

在Flutter中，AndroidView是一个特殊的widget，它允许在Flutter widget树中嵌入Android视图。这可以用于嵌入现有的Android组件，或者使用Android原生代码创建的自定义视图。

以下是一个简单的例子，展示如何在Flutter中使用AndroidView：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Demo'),
        ),
        body: AndroidView(
          viewType: 'com.example.customview/input',
        ),
      ),
    );
  }
}

在这个例子中，AndroidView被用来嵌入一个自定义的Android视图，其viewType是一个字符串，代表要嵌入的视图类型。这个字符串必须与Android原生项目中的一个View类的完全限定名称相匹配，并且这个类必须继承自io.flutter.embedding.android.FlutterView。

请注意，要使这个例子工作，你需要一个配套的Android项目，该项目中定义了一个可以嵌入的自定义视图。此外，你需要正确配置Flutter与Android项目的整合，以便AndroidView可以正常工作。

- 阅读更多 -

Flutter之单例模式的四种方法

System

2024-08-23

所有,flutter

在Flutter中，实现单例模式有四种常见的方法。以下是每种方法的示例代码：

使用final关键字：

class Singleton {
  static final Singleton _singleton = Singleton._internal();

  factory Singleton() {
    return _singleton;
  }

  Singleton._internal();
}

使用getter方法：

class Singleton {
  static Singleton _singleton;

  static Singleton get instance {
    if (_singleton == null) {
      _singleton = Singleton._internal();
    }
    return _singleton;
  }

  Singleton._internal();
}

使用Mixin（混入）：

mixin Singleton {
  static final _singleton = SingletonMixin._internal();

  factory Singleton() {
    return _singleton;
  }

  Singleton._internal();
}

class SingletonMixin with Singleton {}

使用Dart的extension（扩展）：

extension Singleton<T> on T {
  static T _instance;

  T get instance {
    if (_instance == null) {
      _instance = this as T;
    }
    return _instance;
  }
}

class SingletonClass {
  // 使用扩展
  final instance = Singleton<SingletonClass>();
}

这四种方法都可以在Flutter中创建单例模式的对象。选择哪种方法取决于具体的应用场景和个人编程风格。

- 阅读更多 -

Qt/Flutter/Lvgl/Native，总有一个适合你的UI

System

2024-08-23

所有,flutter

这个问题似乎是在询问如何在Qt, Flutter和LVGL以及原生应用程序中选择适合的UI框架。这四个选项都是用于构建用户界面的工具，每个都有其特点和适用场景。

Qt: Qt是一个跨平台的C++图形用户界面应用程序开发框架。它提供了丰富的widget集合，可以快速构建复杂的桌面应用程序。Qt使用信号和槽机制进行事件处理，有很好的社区支持和丰富的文档资源。
Flutter: Flutter是谷歌开发的一个用以构建跨平台UI的工具。它使用Dart作为编程语言，并且提供了高性能的渲染引擎。Flutter的主要优势在于其快速的开发速度和对本地性能的优化。
LVGL: LVGL是一个免费的开源图形库，主要用于嵌入式系统。它提供了丰富的UI组件，例如按钮、图表、列表等，并且可以通过简单的API进行定制。LVGL有很好的移植性，并且可以在不同的硬件平台上运行。
Native: 使用原生平台的API构建UI，例如在Android中使用Java/Kotlin或者在iOS中使用Swift/Objective-C。这种方法的优点是完全利用平台的所有功能，但是缺点是需要为每个平台独立编写和维护代码。

选择哪一个取决于你的具体需求和目标平台。例如，如果你需要一个可以运行在多种设备上的跨平台解决方案，并且主要关注开发速度和简单性，Flutter可能是一个不错的选择。如果你正在为嵌入式设备开发用户界面，并且希望最大化性能和内存效率，LVGL可能是一个不错的选择。如果你正在为特定平台（如Android或iOS）开发应用程序，使用原生工具可能是最好的选择。

以下是在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: RaisedButton(
            onPressed: () {
              // 处理按钮点击事件
            },
            child: Text('Click Me'),
          ),
        ),
      ),
    );
  }
}

以上代码展示了如何在Flutter中创建一个按钮。这是一个快速、灵活且可移植的UI解决方案。

- 阅读更多 -