flutter实现类android的底部导航栏+fragment切换

最新推荐文章于 2024-04-07 01:00:28 发布

凑蜜蜡

最新推荐文章于 2024-04-07 01:00:28 发布

阅读量902

点赞数 1

分类专栏： flutter 文章标签： dart flutter

本文链接：https://blog.csdn.net/qq_32944933/article/details/105144456

版权

flutter 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在这里插入图片描述

入口：

import 'package:flutter/material.dart';

import 'MyTab.dart';

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

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home:MyTab()//只要home，占满屏幕
    );
  }
}

MyTab组件：
分为上下两部分。上面是类似于fragment，下面是导航栏。

import 'package:flutter/material.dart';
import 'package:flutter_app/HomePage.dart';
import 'package:flutter_app/MapPage.dart';
import 'package:flutter_app/SearchPage.dart';
import 'package:flutter_app/SettingsPage.dart';


class MyTab extends StatefulWidget {//继承状态可变的组件
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _TabsState();
  }
}

class _TabsState extends State<MyTab> {
  int _currentIndex = 0;
  //装页面的数组
  List _pageList=[HomePage(),MapPage(),SettingsPage(),SearchPage()];

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
//      appBar: AppBar(
//        title: Text("title"),
//        leading: Icon(Icons.home),
//      ),
      body: _pageList[_currentIndex],//
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        currentIndex: _currentIndex,
        fixedColor: Colors.purple,
        onTap: (index) {//点击导航栏的item
          setState(() {//改变状态
            _currentIndex = index;
          });
        },
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(icon: Icon(Icons.home), title: Text("主页")),
          BottomNavigationBarItem(icon: Icon(Icons.map), title: Text("地图")),
          BottomNavigationBarItem(icon: Icon(Icons.settings), title: Text("设置")),
          BottomNavigationBarItem(icon: Icon(Icons.search), title: Text("搜索")),
        ],
      ),
    );
  }
}

HomePage组件：

import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("home"),
          leading: Icon(Icons.home),
        ),
        body: ListView(
          children: <Widget>[
            _buildChild(),
            _buildChild(),
            _buildChild(),
            _buildChild(),
            _buildChild(),
            _buildChild(),
          ],
        ),
      ),
    );
  }

  Widget _buildChild() {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Image.network("https://www.itying.com/images/flutter/1.png"),
    );
  }
}

MapPage组件：

import 'package:flutter/material.dart';

class MapPage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("map"),
          leading: Icon(Icons.map),
        ),
        body: ListView(
          children: <Widget>[
            _buildChild(),
            _buildChild(),
            _buildChild(),
            _buildChild(),
            _buildChild(),
            _buildChild(),
          ],
        ),
      ),
    );
  }

  Widget _buildChild() {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Image.network("https://www.itying.com/images/flutter/2.png"),
    );
  }
}