Flutter网页嵌入插件web_scaffold的使用

概述

web_scaffold 是一个用于快速创建网页的 Flutter 插件。它提供了灵活的布局选项，可以轻松构建复杂的网页结构。

开始使用

参数说明

以下是一个完整的 WebScaffold 使用示例，展示了如何配置各个参数：

[@override](/user/override)
Widget build(BuildContext context) {
  return WebScaffold(
    bodyKey: PageStorageKey(0), // 用于保存滚动位置（例如）
    // 必需参数
    bodyConfiguration: const BodyConfiguration([
      FlexPart(), // 类似于带有 flex: 1 的 Flexible
      BodyPart(flex: 5), // 类似于带有 flex: 5 的 Flexible
      FlexPart(), // 类似于带有 flex: 1 的 Flexible
    ]),
    header: _buildHeader(), // 构建头部
    headerSettings: HeaderSettings(
      headerHeight: kToolbarHeight, // 头部高度
      pinned: true, // 是否固定头部
    ),
    body: _buildBody(), // 构建主体部分
    expandBody: false, // 是否扩展主体高度
    footer: _buildFooter(), // 构建底部
    footerSettings: FooterSettings(footerHeight: kToolbarHeight), // 配置底部高度
    linkConfiguration: true, // 是否让头部和底部共享相同的灵活空间，默认为 true
  );
}

// 构建头部
Container _buildHeader() {
  return Container(
    color: Colors.red,
    child: const Center(
      child: Text(
        'Header',
        style: TextStyle(color: Colors.white),
      ),
    ),
  );
}

// 构建主体
Container _buildBody() {
  return Container(
    margin: const EdgeInsets.symmetric(vertical: 16),
    height: 4000,
    color: Colors.blue,
    child: const Center(
      child: Text(
        'Body',
        style: TextStyle(color: Colors.white),
      ),
    ),
  );
}

// 构建底部
Container _buildFooter() {
  return Container(
    height: kToolbarHeight,
    color: Colors.yellow,
    child: const Center(
      child: Text(
        'Footer',
        style: TextStyle(color: Colors.white),
      ),
    ),
  );
}

完整示例代码

以下是一个完整的示例代码，展示了如何在 Flutter 中使用 web_scaffold 插件：

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ExampleUsage(),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return WebScaffold(
      bodyConfiguration: const BodyConfiguration([
        FlexPart(1), // 灵活部分，flex 值为 1
        BodyPart(5), // 主体部分，flex 值为 5
        FlexPart(1), // 灵活部分，flex 值为 1
      ]),
      header: _buildHeader(), // 构建头部
      headerSettings: HeaderSettings(
        headerHeight: kToolbarHeight, // 头部高度
        pinned: true, // 固定头部
      ),
      body: _buildBody(), // 构建主体
      footer: _buildFooter(), // 构建底部
      linkConfiguration: true, // 头部和底部共享灵活空间
      pinnedHeader: true, // 固定头部
    );
  }

  // 构建头部
  Container _buildHeader() {
    return Container(
      color: Colors.red,
      child: const Center(
        child: Text(
          'Header',
          style: TextStyle(color: Colors.white),
        ),
      ),
    );
  }

  // 构建主体
  Container _buildBody() {
    return Container(
      margin: const EdgeInsets.symmetric(vertical: 16),
      height: 4000, // 设置一个较大的高度以测试滚动效果
      color: Colors.blue,
      child: const Center(
        child: Text(
          'Body',
          style: TextStyle(color: Colors.white),
        ),
      ),
    );
  }

  // 构建底部
  Container _buildFooter() {
    return Container(
      height: kToolbarHeight,
      color: Colors.yellow,
      child: const Center(
        child: Text(
          'Footer',
          style: TextStyle(color: Colors.white),
        ),
      ),
    );
  }
}