Flutter学习之旅 - Scaffold属性FloatingActionButton

最新推荐文章于 2024-05-13 22:46:08 发布

结城明日奈是我老婆

最新推荐文章于 2024-05-13 22:46:08 发布

阅读量377

点赞数

分类专栏： fluuter学习文章标签： flutter 学习 android

本文链接：https://blog.csdn.net/yasinawolaopo/article/details/130545274

版权

fluuter学习专栏收录该内容

17 篇文章 1 订阅

订阅专栏

找到文件中的BottomNavigationBar来在后面进行追加

floatingActionButton //浮动按钮的样式格式
floatingActionButtonLocation//floatingActionButtonLocation来调整floatingActionButton的位置

修改容器位置

floatingActionButton: Container(
        width: 80,
        height: 80,
        decoration: const BoxDecoration(color: Colors.red),
        child: FloatingActionButton(
          onPressed: () {},
          child: const Icon(Icons.add),
        ),
      ),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked, //floatingActionButtonLocation来调整floatingActionButton的位置

在这里插入图片描述

完整代码

import 'package:flutter/material.dart';
//import 'package:项目名/lib目录下的文件或文件夹'
import 'package:flutter_learn_test02_flu/pages/tabs/home.dart';
import 'package:flutter_learn_test02_flu/pages/tabs/my.dart';
import 'package:flutter_learn_test02_flu/pages/tabs/message.dart';

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

  @override
  State<Tabs> createState() => _TabsState();
}

class _TabsState extends State<Tabs> {
  int _currentIndex = 0;
  final List<Widget> _pages = const [
    HomePage(),
    MessagePage(),
    MyPage(),
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          backgroundColor: Color.fromRGBO(255, 255, 255, 1),
          leading: const CircleAvatar(
            backgroundImage: NetworkImage(
                "https://i2.hdslb.com/bfs/face/ce2494fac2fd854dd2813b8960521d8e0d1a527c.jpg@150w_150h.jpg"),
          )),
      body: _pages[_currentIndex], //修改
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        onTap: (index) {
          //index:点击索引值
          // print(index);
          setState(() {
            _currentIndex = index;
          });
        },
        items: const [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: "首页"),
          BottomNavigationBarItem(icon: Icon(Icons.message), label: "消息"),
          BottomNavigationBarItem(
              icon: Icon(Icons.my_library_add_outlined), label: "我的")
        ],
      ),
      floatingActionButton: Container(
        width: 60, //调整FloatingActionButton大小
        height: 60, //调整FloatingActionButton大小
        padding: const EdgeInsets.all(5),
        margin: const EdgeInsets.only(top: 10), //调整FloatingActionButton位置
        decoration: BoxDecoration(
            color: Colors.white, borderRadius: BorderRadius.circular(30)),
        child: FloatingActionButton(
          onPressed: () {},
          child: const Icon(Icons.add),
        ),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation
          .centerDocked, //floatingActionButtonLocation来调整floatingActionButton的位置
    );
  }
}