Flutter原生界面框架插件native_scaffold的使用

Flutter原生界面框架插件native_scaffold的使用

flutter-native-scaffold-intro

如何开始❓ 🤔

你可以通过以下命令从命令行添加依赖:

flutter pub add native_scaffold

或者你可以在pubspec.yaml文件中添加它:

dependencies:
  native_scaffold:

有什么不同?

特性 Scaffold CustomScaffold
提供基本的AppBar和Scaffold功能
使用简单且易于设置 👎🏻
在Android和iOS上提供更好的体验 👎🏻
易于添加滑动动画 👎🏻
允许添加底部浮动栏 👎🏻
可以轻松使用onRefresh函数 👎🏻

如何使用❓ 🤔

使用它就像创建一个Container一样简单。不相信?让我展示给你看:

NativeScaffold(
  title: "这是简单的",
  child: ..., // 主要内容
);

额外参数(可选)

  • title: 应用栏或导航栏的标题。
  • action: 显示在应用栏或导航栏末尾的动作组件。
  • leading: 显示在应用栏或导航栏开头的组件。
  • child: 应用栏的主要内容。
  • showLoargeTitleInIOS: 是否在iOS上显示大标题。仅适用于iOS。
  • sliverAppBarPinned: 当滚动时是否固定SliverAppBar。仅适用于Android。
  • onRefresh: 刷新手势触发时调用的函数。
  • sliverAppBarWidget: 自定义的SliverAppBar组件。仅适用于Android。
  • appBarCenterWidget: 显示在应用栏中心的组件。
  • sliverAppBarWidgetHeight: 自定义SliverAppBar的高度。
  • bottomFloatingBar: 用作底部导航栏的组件。
  • backgroundColor: 应用栏的背景颜色。
  • appBarEnabled: 是否启用应用栏。

这是Zenzzen团队为你特别制作的,现在轮到你来打造一款震撼人心的应用了💪

使用此插件制作的一些应用

other-apps-using-custom-scaffold ```

示例代码

// ignore_for_file: prefer_const_literals_to_create_immutables, prefer_const_constructors

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

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

class MainApp extends StatelessWidget {
  const MainApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        useMaterial3: true,
      ),
      home: NativeScaffold(
        title: "标题",
        onRefresh: () async {
          await Future.delayed(Duration(seconds: 2));
        },
        action: IconButton(
          icon: Icon(Icons.add),
          onPressed: () {},
        ),
        appBarEnabled: true,
        backgroundColor: Colors.white,
        bottomFloatingBar: SizedBox(
          height: double.infinity,
          child: Stack(
            alignment: Alignment.bottomCenter,
            children: [
              Container(
                height: 50,
                width: double.infinity,
                color: Colors.red,
              ),
            ],
          ),
        ),
        sliverAppBarWidget: Image.network(
          "https://user-images.githubusercontent.com/102783954/235310805-89819d0c-617f-41f8-8795-681cd98faa41.png",
          fit: BoxFit.cover,
        ),
        sliverAppBarPinned: true,
        sliverAppBarWidgetHeight: 300,
        showLoargeTitleInIOS: true,
        leading: IconButton(
          icon: Icon(Icons.menu),
          onPressed: () {},
        ),
        appBarCenterWidget: Text("中心"),
        child: Column(
          children: [
            SizedBox(
              height: 2000,
            ),
          ],
        ),
      ),
    );
  }
}

更多关于Flutter原生界面框架插件native_scaffold的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter原生界面框架插件native_scaffold的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,以下是一个关于如何在Flutter项目中使用native_scaffold插件的示例代码。native_scaffold插件允许你创建一个更接近原生Android和iOS风格的界面。

首先,确保你已经在你的pubspec.yaml文件中添加了native_scaffold依赖:

dependencies:
  flutter:
    sdk: flutter
  native_scaffold: ^x.y.z  # 请替换为最新版本号

然后运行flutter pub get来安装依赖。

以下是一个完整的示例,展示了如何使用native_scaffold来创建一个具有原生风格的界面:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Native Scaffold Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: NativeScaffold(
        appBar: AppBar(
          title: Text('Native Scaffold Demo'),
        ),
        drawer: Drawer(
          child: ListView(
            padding: EdgeInsets.zero,
            children: <Widget>[
              DrawerHeader(
                child: Text('Drawer Header'),
                decoration: BoxDecoration(
                  color: Colors.blue,
                ),
              ),
              ListTile(
                leading: Icon(Icons.home),
                title: Text('Home'),
                onTap: () {
                  Navigator.of(context).pop(); // 关闭抽屉
                },
              ),
              ListTile(
                leading: Icon(Icons.settings),
                title: Text('Settings'),
                onTap: () {
                  Navigator.of(context).pop(); // 关闭抽屉
                },
              ),
            ],
          ),
        ),
        body: Center(
          child: Text('Hello, Native Scaffold!'),
        ),
        // 如果在iOS上,你可以使用cupertinoDrawerOptions来配置Cupertino风格的抽屉
        cupertinoDrawerOptions: CupertinoDrawerOptions(
          openGesture: true,
          drawer: CupertinoNavigationBar(
            middle: Text('Cupertino Drawer'),
            trailing: CupertinoNavigationBarBackButton(
              onPressed: () {
                Navigator.of(context).pop(); // 关闭抽屉
              },
            ),
          ),
          // 你可以在这里添加更多的Cupertino风格的选项
        ),
        // 在Android上,可以使用floatingActionButton和floatingActionButtonLocation
        floatingActionButton: FloatingActionButton(
          onPressed: () {},
          tooltip: 'Action',
          child: Icon(Icons.add),
        ),
        floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
        bottomNavigationBar: BottomNavigationBar(
          items: <BottomNavigationBarItem>[
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              label: 'Home',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.business),
              label: 'Business',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.school),
              label: 'School',
            ),
          ],
          currentIndex: 0,
          onTap: (int index) {
            // Handle navigation bar item taps
          },
        ),
      ),
    );
  }
}

在这个示例中,我们展示了如何配置NativeScaffold的多个属性:

  1. AppBar:标准的Flutter应用栏。
  2. Drawer:一个标准的Material Design抽屉导航菜单。
  3. Body:主界面的中心内容。
  4. CupertinoDrawerOptions:用于iOS风格的抽屉配置(虽然在这个示例中并没有添加具体的Cupertino风格的选项)。
  5. FloatingActionButton:一个标准的浮动操作按钮。
  6. BottomNavigationBar:一个底部导航栏。

这个示例应该能帮助你理解如何在Flutter项目中使用native_scaffold插件来创建一个具有原生风格的界面。根据你的需求,你可以进一步自定义和扩展这个示例。

回到顶部