Flutter实现仿微信底部菜单栏

最新推荐文章于 2024-08-23 09:18:52 发布

轻烟飘荡

最新推荐文章于 2024-08-23 09:18:52 发布

阅读量721

点赞数 1

文章标签： Flutter 仿微信底部菜单栏

本文链接：https://blog.csdn.net/qq_16519957/article/details/90792533

版权

在这里插入图片描述

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      home: Scaffold(
        body: MyHomePage(),
      ),
    );
  }

}

class MyHomePage extends StatefulWidget{
 MyHomePage({Key key}) : super(key:key);
 @override
 _MyHomePageState createState() => _MyHomePageState();

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return null;
  }


}
class _MyHomePageState extends State<MyHomePage>
{
  int _selectedIndex = 1;//当前选中项的索引
  final _widgetOptions = [
    Text('Index 0: 微信'),
    Text('Index 1: 通讯录'),
    Text('Index 2: 发现'),
    Text('Index 3：我')

  ];



  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('仿微信'),
      ),
      body: Center(
        child: _widgetOptions.elementAt(_selectedIndex),//居中显示某个文本

      ),
      //底部导航按钮,包含图标及文本
      bottomNavigationBar: BottomNavigationBar(
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(icon: Icon(Icons.chat),backgroundColor:Colors.green,title: Text('微信')),//设置背景颜色和icon的描述
          BottomNavigationBarItem(icon: Icon(Icons.contacts),backgroundColor:Colors.green,title: Text('通讯录')),
          BottomNavigationBarItem(icon: Icon(Icons.account_circle),backgroundColor:Colors.green,title: Text('发现')),
          BottomNavigationBarItem(icon: Icon(Icons.memory),backgroundColor:Colors.green,title: Text('我')),
         ],
//        backgroundColor: Colors.green,
        currentIndex: _selectedIndex,//当前选中项的索引
        fixedColor: Colors.deepPurple,//选项中项的颜色
        onTap:_onItemTapped,//选择按下处理

      ),
    );
  }
  //选择按下处理
void _onItemTapped(int index)
{
  setState(() {
    _selectedIndex = index;
  });
}
}