Flutter使用Bruno结合PageView

效果展示

类似一般APP的主页面效果，这里加入了页面缓存，所以首页点击切换文字后切换别的页面再回到首页数据没有复原

代码实现

这里我们用的贝壳UI框架：https://bruno.ke.com/
首先我们在pubspec.yaml文件中加入贝壳的bruno UI框架

  bruno:
    git:
      url: https://github.com/BingKui/bruno.git

或者

bruno: ^3.3.0

然后我们创建三个页面

class _OnePageState extends State<OnePage> {
  String title = "首页";
  @override
  Widget build(BuildContext context) {
    print("首页");
    return Scaffold(
      body: Center(
        child: GestureDetector(
          onTap: (){
            setState(() {
              title = "收营业员";
            });
          },
          child: Text(title,style: TextStyle(fontSize: 30,color: Colors.blue),),
        ),
      ),
    );
  }
}

class TwoPage extends StatefulWidget {
  const TwoPage({super.key});

  @override
  State<TwoPage> createState() => _TwoPageState();
}

class _TwoPageState extends State<TwoPage> {
  @override
  Widget build(BuildContext context) {
    print("发现");
    return Scaffold(
      body: Center(
        child: Text("发现",style: TextStyle(fontSize: 30,color: Colors.blue),),
      ),
    );
  }
}

class ThreePage extends StatefulWidget {
  const ThreePage({super.key});

  @override
  State<ThreePage> createState() => _ThreePageState();
}

class _ThreePageState extends State<ThreePage>{
  @override
  Widget build(BuildContext context) {
    print("我的");
    return Scaffold(
      body: Center(
        child: Text("我的",style: TextStyle(fontSize: 30,color: Colors.blue),),
      ),
    );
  }
}

然后我们创建首页，其中BrnBottomTabBar使用的是贝壳的Tab切换组件，这里我们还使用了KeepAliveView缓存组件

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late PageController _pageController;
  int _current_page = 0;
  var children = <Widget>[KeepAliveView(keep_alive: true, child: OnePage()),KeepAliveView(keep_alive: true, child: TwoPage()),KeepAliveView(keep_alive: true, child: ThreePage())];
  var titles = ['One', 'Two', 'Three'];
  @override
  void initState() {
    super.initState();
    _pageController = PageController(
      initialPage: 0,
      keepPage: true
    );
  }

  @override
  void dispose() {
    super.dispose();
    _pageController.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Column(
        children: [
          Expanded(child: PageView(
            onPageChanged: (pagePos){
              setState(() {
                _current_page = pagePos;
              });
            },
            scrollDirection: Axis.horizontal,
            children:children,
            controller: _pageController,
          ),),
          BrnBottomTabBar(
            fixedColor: Colors.blue,
            currentIndex: _current_page,
            onTap: (value){
              setState(() {
                _current_page = value;
                _pageController.jumpToPage(_current_page);
              });
            },
            badgeColor: Colors.red,
            items: <BrnBottomTabBarItem>[
              BrnBottomTabBarItem(icon: Image(image: AssetImage("asstes/images/home.png"),width: 30,height: 30,), title: Text(titles[0])),
              BrnBottomTabBarItem(icon: Image(image: AssetImage("asstes/images/home.png"),width: 30,height: 30,), title: Text(titles[1])),
              BrnBottomTabBarItem(icon: Image(image: AssetImage("asstes/images/home.png"),width: 30,height: 30,), title: Text(titles[2])),
            ],
          )
        ],
      ),
    );
  }
}

class KeepAliveView extends StatefulWidget {
  bool keep_alive;
  Widget child;
  KeepAliveView({super.key,required this.keep_alive,required this.child});

  @override
  State<KeepAliveView> createState() => _KeepAliveViewState();
}

class _KeepAliveViewState extends State<KeepAliveView> with AutomaticKeepAliveClientMixin{
  @override
  Widget build(BuildContext context) {
    return widget.child;
  }

  @override
  bool get wantKeepAlive => widget.keep_alive; // 是否需要缓存
}

上面使用的Tab上的图片是

pubspec.yaml文件中声明

  assets:
    - asstes/images/home.png

运行起来之后就是文章开头的效果
我们可以看到打印，只是第一次打印信息，后面再进入页面就不再打印了，说明页面被缓存了

假如去掉缓存的话我们看打印如下，切换页面的时候会重新加载