Flutter视图扩展插件june_view_more的使用

Flutter视图扩展插件june_view_more的使用

安装

1. 如果你还没有创建juneflow项目，请根据此指南创建一个。
2. 在juneflow项目的根目录打开终端，输入以下命令：

june add june_view_more

使用示例

以下是一个完整的示例，展示如何在Flutter应用中使用june_view_more插件。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  [@override](/user/override)
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  // 控制底部导航栏的状态
  int _currentIndex = 0;

  // 底部导航栏选项
  final List<Widget> _children = [
    Text('首页'),
    Text('发现'),
    Text('个人中心'),
  ];

  // 切换底部导航栏选项的方法
  void onTabTapped(int index) {
    setState(() {
      _currentIndex = index;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('June View More 示例'),
      ),
      body: Center(
        child: _children[_currentIndex],
      ),
      bottomNavigationBar: JuneBottomNavigationBar(
        currentIndex: _currentIndex,
        onTap: onTabTapped,
        items: [
          JuneBottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: '首页',
          ),
          JuneBottomNavigationBarItem(
            icon: Icon(Icons.search),
            label: '发现',
          ),
          JuneBottomNavigationBarItem(
            icon: Icon(Icons.person),
            label: '个人中心',
          ),
        ],
      ),
    );
  }
}