Flutter可扩展页面视图插件expandable_page_view的使用

expandable_page_view是一个能够根据当前显示页面调整高度的PageView小部件。它接受与经典PageView相同的参数。

示例效果

Horizontal	Vertical

开始使用

在Flutter项目的pubspec.yaml文件中添加以下依赖项：

dependencies:
  ...
  expandable_page_view: ^1.0.17

然后导入包：

import 'package:expandable_page_view/expandable_page_view.dart';

使用示例

固定Expandable Page View

要创建一个固定页面视图，只需将一组小部件传递给children参数：

ExpandablePageView(
  children: [
     ExamplePage(Colors.blue, "1", 100),
     ExamplePage(Colors.green, "2", 200),
     ExamplePage(Colors.red, "3", 300),
  ],
),

其中ExamplePage可以自定义为如下：

class ExamplePage extends StatelessWidget {
  final Color color;
  final String text;
  final double height;

  ExamplePage(this.color, this.text, this.height);

  @override
  Widget build(BuildContext context) {
    return Container(
      color: color,
      height: height,
      child: Center(
        child: Text(text, style: TextStyle(fontSize: 24, color: Colors.white)),
      ),
    );
  }
}

动态构建的Expandable Page View

如果您有多个页面需要显示，并且希望在滚动时动态构建它们，请使用.builder构造函数并传递itemCount和itemBuilder参数：

ExpandablePageView.builder(
  itemCount: 3,
  itemBuilder: (context, index) {
    return ExamplePage(Colors.blue, index.toString(), (index + 1) * 100.0);
  },
),

完整的示例demo

下面提供了一个完整的示例代码，演示了如何使用expandable_page_view插件创建一个简单的应用程序，该应用程序包含三个页面，每个页面有不同的颜色和高度，并且可以通过底部导航栏进行切换。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Expandable Page View Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Expandable Page View Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: IndexedStack(
        index: _currentIndex,
        children: [
          BalancePage(),
          VerticalBalancePage(),
          BasicExamplesPage(),
        ],
      ),
      bottomNavigationBar: BottomNavigationBar(
        backgroundColor: Colors.blue,
        currentIndex: _currentIndex,
        unselectedItemColor: Color(0xff3a0ca3),
        selectedItemColor: Colors.white,
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.attach_money_rounded),
            label: '',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.currency_exchange_rounded),
            label: '',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.info),
            label: '',
          ),
        ],
        onTap: (index) => setState(() => _currentIndex = index),
      ),
    );
  }
}

// 自定义页面组件
class BalancePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ExpandablePageView(
      children: [
        ExamplePage(Colors.blue, "1", 100),
        ExamplePage(Colors.green, "2", 200),
        ExamplePage(Colors.red, "3", 300),
      ],
    );
  }
}

class VerticalBalancePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ExpandablePageView.builder(
      scrollDirection: Axis.vertical,
      itemCount: 3,
      itemBuilder: (context, index) {
        return ExamplePage(Colors.blue, index.toString(), (index + 1) * 100.0);
      },
    );
  }
}

class BasicExamplesPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text('Basic Examples Page', style: TextStyle(fontSize: 24)),
    );
  }
}

class ExamplePage extends StatelessWidget {
  final Color color;
  final String text;
  final double height;

  ExamplePage(this.color, this.text, this.height);

  @override
  Widget build(BuildContext context) {
    return Container(
      color: color,
      height: height,
      child: Center(
        child: Text(text, style: TextStyle(fontSize: 24, color: Colors.white)),
      ),
    );
  }
}

这个例子展示了如何使用expandable_page_view来创建一个具有不同布局和内容的页面视图，并通过底部导航栏在这些页面之间切换。您还可以根据需要调整和扩展此代码以适应您的应用需求。