Flutter 实现闲鱼凸起栏

Flutter 实现凸起栏

Flutter FloatingActionButton介绍  通过FloatingActionButton实现闲鱼app底部凸起按钮

FloatingActionButton简称 FAB，可以实现浮动按钮，也可以实现类似闲鱼app的底部凸起导航。

效果：

main.dart

import 'package:flutter/material.dart';
import 'package:flutterappbarapp/TabPage/Tab.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Test',
      home: Tabs(),
    );
  }
}

tabs.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutterappbarapp/TabPage/page/AddPage.dart';
import 'package:flutterappbarapp/TabPage/page/HomePages.dart';
import 'package:flutterappbarapp/TabPage/page/SettingPage.dart';

class Tabs extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    return TabState();
  }
}

class TabState extends State<Tabs>{
  int _currentIndex = 0;
  List _listPageData = [ //页面集合
    HomePages(),
    AddPage(),
    SettingPage()
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _listPageData[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: this._currentIndex,//配置对应的索引值选中
        onTap: (int index){//index 表示选择选项
          setState(() {
            this._currentIndex = index;//改变页面
          });
        },
        iconSize: 36.0,//icon的大小
        fixedColor: Colors.red,//选中颜色
        type: BottomNavigationBarType.fixed,
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text("首页")
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.add),
            title: Text("添加")
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.settings),
            title: Text("设置")
          ),
        ],
      ),
      floatingActionButton: Container(//Container框
        height: 80,
        width: 80,
        decoration: BoxDecoration(//实现圆
          borderRadius: BorderRadius.circular(40),
          color: Colors.white,
        ),
        margin: EdgeInsets.only(top:10),//外部margin
        padding: EdgeInsets.all(8), //内部margin
        child: FloatingActionButton(//按钮
            child: Icon(Icons.add),
            backgroundColor: this._currentIndex==1?Colors.red:Colors.yellow,
            onPressed: () {
              setState(() {
                print('点击 1');
                this._currentIndex=1;
              });
            },
        )
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,//Floating放在底部中间
    );
  }
}

HomePages.dart

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

class HomePages extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.yellow,
      child: Center(
        child: Text("HomePages"),
      ),
    );
  }
}

AddPage.dart

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

class AddPage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.blue,
      child: Center(
        child: Text("addPage"),
      ),
    );
  }
}

SettingPage.dart

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

class SettingPage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.pink,
      child: Center(
        child: Text("SettingPage"),
      ),
    );
  }
}

最后

以上就是开心唇膏为你收集整理的Flutter 实现闲鱼凸起栏的全部内容，希望文章能够帮你解决Flutter 实现闲鱼凸起栏所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。