凸起按钮的配置
作者:互联网
import 'package:flutter/material.dart'; import 'tabs/Home.dart'; import 'tabs/Setting.dart'; import 'tabs/Category.dart';
class Tabs extends StatefulWidget { Tabs({Key? key}) : super(key: key);
@override _TabsState createState() => _TabsState(); }
class _TabsState extends State<Tabs> { int _currentIndex = 0;
List _pageList = [ HomePage(), CategoryPage(), SeetingPage(), ]; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("flutter Demo"), ), floatingActionButton: Container( height: 80, width: 80, padding: EdgeInsets.all(8), margin: EdgeInsets.only(top: 10), decoration: BoxDecoration( borderRadius: BorderRadius.circular(40), color: Colors.white, ), child: FloatingActionButton( child: Icon( Icons.add, color: Colors.white, size: 40, ), onPressed: () { setState(() { this._currentIndex = 1; }); }, backgroundColor: this._currentIndex == 1 ? Colors.red : Colors.yellow, ), ), floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked, body: this._pageList[this._currentIndex], bottomNavigationBar: BottomNavigationBar( currentIndex: this._currentIndex, // 配置选中的索引 onTap: (int index) { // print(index); setState(() { this._currentIndex = index; }); }, iconSize: 36.0, // 设置图标大小 fixedColor: Colors.red, // 选中的颜色 type: BottomNavigationBarType.fixed, // 配置底部tabs 可以有多个按钮 items: [ BottomNavigationBarItem( icon: Icon(Icons.home), title: Text("首页"), ), BottomNavigationBarItem( icon: Icon(Icons.category), title: Text("分类"), ), BottomNavigationBarItem( icon: Icon(Icons.settings), title: Text("设置"), ), ], ), drawer: Drawer( child: Column( children: [ Row( children: [ Expanded( child: UserAccountsDrawerHeader( accountName: Text("Eric"), accountEmail: Text("12@qw.com"), currentAccountPicture: CircleAvatar( backgroundImage: NetworkImage( "https://www.itying.com/images/flutter/3.png"), ), decoration: BoxDecoration( image: DecorationImage( image: NetworkImage( "https://www.itying.com/images/flutter/2.png"), fit: BoxFit.cover, ), ), otherAccountsPictures: [ Image.network( "https://www.itying.com/images/flutter/4.png"), Image.network( "https://www.itying.com/images/flutter/5.png"), Image.network( "https://www.itying.com/images/flutter/6.png"), Image.network( "https://www.itying.com/images/flutter/2.png") ], ), ), ], ), ListTile( leading: CircleAvatar( child: Icon(Icons.home), ), title: Text("我的空间"), ), Divider(), ListTile( leading: CircleAvatar( child: Icon(Icons.people), ), title: Text("用户中心"), onTap: () { Navigator.of(context).pop(); // 隐藏侧边栏 Navigator.pushNamed(context, '/user'); }), Divider(), ListTile( leading: CircleAvatar( child: Icon(Icons.settings), ), title: Text("设置中心"), ), Divider(), ], ), ), endDrawer: Drawer( child: Text('你好'), ), ); } }
标签:title,Text,配置,flutter,按钮,currentIndex,child,凸起,Icon 来源: https://www.cnblogs.com/eric-share/p/15101205.html