为什么我的浮动操作按钮没有浮动在我创建的屏幕上>

Question

您好，请再次帮助我，我的浮动操作按钮没有显示在我放置的所有元素上，但它位于页面底部。当你创建一个项目时，我检查了颤振的样板，但我的位置不正确。

注意：我对此进行了搜索，但发现了 Stack 和 Extended 但我不知道将它们放在哪里。谢谢！

这是我的代码：

import 'package:flutter/material.dart';
import 'package:vmembershipofficial/Widgets/afterintroducing.dart';
import 'package:vmembershipofficial/Widgets/discount_carousel.dart';
import 'package:vmembershipofficial/Widgets/header_carousel.dart';
import 'package:vmembershipofficial/Widgets/introducing_vmembership.dart';

class NavHome extends StatefulWidget {
  // static final String id = 'homepage';
  NavHome({Key key}) : super(key: key);

  @override
  _NavHomeState createState() => _NavHomeState();
}

class _NavHomeState extends State<NavHome> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
          body: Container(
        child: ListView(
          children: <Widget>[
            Padding(
              padding: EdgeInsets.symmetric(horizontal: 30.0, vertical: 10.0),
              child: Text(
                "Explore V!",
                style: TextStyle(fontWeight: FontWeight.w600, fontSize: 20.0),
              ),
            ),
            SizedBox(height: 5.0),
            HeaderCarousel(),
            SizedBox(height: 30.0),
            Padding(
              padding: EdgeInsets.symmetric(horizontal: 30.0, vertical: 10.0),
              child: Text(
                "Discount",
                style: TextStyle(fontWeight: FontWeight.w600, fontSize: 20.0),
              ),
            ),
            Padding(
              padding: EdgeInsets.symmetric(horizontal: 30.0, vertical: 5.0),
              child: Text(
                "Lorem ipsum dolor sit amet, consectetuer adipiscing elit.",
                style: TextStyle(fontSize: 12.0),
              ),
            ),
            DiscountCarousel(),
            SizedBox(height: 30.0),
            Padding(
              padding: EdgeInsets.symmetric(horizontal: 30.0, vertical: 10.0),
              child: Text(
                "Introducing V Membership Plus",
                style: TextStyle(fontSize: 20.0, fontWeight: FontWeight.w600),
              ),
            ),
            Padding(
              padding: EdgeInsets.symmetric(horizontal: 30.0, vertical: 4.0),
              child: Text(
                "Lorem ipsum dolor sit amet, consectetuer adipiscing elit.",
                style: TextStyle(fontSize: 12.0),
              ),
            ),
            VmembershipPlus(),
            SizedBox(height: 30.0),
            Padding(
              padding: EdgeInsets.symmetric(horizontal: 30.0, vertical: 10.0),
              child: Text(
                "Lorem Ipsum",
                style: TextStyle(fontSize: 20.0, fontWeight: FontWeight.w600),
              ),
            ),
            Padding(
              padding: EdgeInsets.symmetric(horizontal: 30.0, vertical: 4.0),
              child: Text(
                "Lorem ipsum dolor sit amet, consectetuer adipiscing elit.",
                style: TextStyle(fontSize: 12.0),
              ),
            ),
            SizedBox(
              height: 10.0,
            ),
            AfterIntroducing(),
            SizedBox(
              height: 10.0,
            ),
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 30.0),
              child: FlatButton(
                padding: EdgeInsets.all(15.0),
                color: Colors.blue,
                textColor: Colors.white,
                onPressed: () {},
                child: Text(
                  "LOREM IPSUM",
                  style: TextStyle(fontSize: 15.0, fontWeight: FontWeight.w600),
                ),
              ),
            ),
            SizedBox(
              height: 50.0,
            ),
            FloatingActionButton(
              child: Icon(Icons.add),
              onPressed: () {},
            )
          ],
        ),
      ),
    );
  }
}

Answer 1

只需将您的 FloatingActionButton 放在主体外部，但在脚手架小部件内部。

FloatingActionButton 会有一个默认行为，如果你将它添加到 Scaffold 属性 floatingActionButton 之类的，

class _NavHomeState extends State<NavHome> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
         body: Your_Widget_Here(),
         floatingActionButton : FloatingActionButton(
            child: Icon(Icons.add),
            onPressed: () {},
          )
    );
  }
}

Answer 2

FloatActionButton 应该放在 Scaffold 中的 app bar 或 body 的同级：

class _NavHomeState extends State<NavHome> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
         body: Container(),
         FloatingActionButton(
            child: Icon(Icons.add),
            onPressed: () {},
          )
    );
  }
}

查看flutter youtube channel 或flutter docs 中每个小部件的示例，您将知道如何将它们放入小部件树中。

您也可以查看FloatingActionButton class文档。

Answer 3

试试这个：

import 'package:flutter/material.dart';
import 'package:vmembershipofficial/Widgets/afterintroducing.dart';
import 'package:vmembershipofficial/Widgets/discount_carousel.dart';
import 'package:vmembershipofficial/Widgets/header_carousel.dart';
import 'package:vmembershipofficial/Widgets/introducing_vmembership.dart';

class NavHome extends StatefulWidget {
  // static final String id = 'homepage';
  NavHome({Key key}) : super(key: key);

  @override
  _NavHomeState createState() => _NavHomeState();
}

class _NavHomeState extends State<NavHome> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(

        body: Container(
        child: ListView(
          children: <Widget>[
            Padding(
              padding: EdgeInsets.symmetric(horizontal: 30.0, vertical: 10.0),
              child: Text(
                "Explore V!",
                style: TextStyle(fontWeight: FontWeight.w600, fontSize: 20.0),
              ),
            ),
            SizedBox(height: 5.0),
            HeaderCarousel(),
            SizedBox(height: 30.0),
            Padding(
              padding: EdgeInsets.symmetric(horizontal: 30.0, vertical: 10.0),
              child: Text(
                "Discount",
                style: TextStyle(fontWeight: FontWeight.w600, fontSize: 20.0),
              ),
            ),
            Padding(
              padding: EdgeInsets.symmetric(horizontal: 30.0, vertical: 5.0),
              child: Text(
                "Lorem ipsum dolor sit amet, consectetuer adipiscing elit.",
                style: TextStyle(fontSize: 12.0),
              ),
            ),
            DiscountCarousel(),
            SizedBox(height: 30.0),
            Padding(
              padding: EdgeInsets.symmetric(horizontal: 30.0, vertical: 10.0),
              child: Text(
                "Introducing V Membership Plus",
                style: TextStyle(fontSize: 20.0, fontWeight: FontWeight.w600),
              ),
            ),
            Padding(
              padding: EdgeInsets.symmetric(horizontal: 30.0, vertical: 4.0),
              child: Text(
                "Lorem ipsum dolor sit amet, consectetuer adipiscing elit.",
                style: TextStyle(fontSize: 12.0),
              ),
            ),
            VmembershipPlus(),
            SizedBox(height: 30.0),
            Padding(
              padding: EdgeInsets.symmetric(horizontal: 30.0, vertical: 10.0),
              child: Text(
                "Lorem Ipsum",
                style: TextStyle(fontSize: 20.0, fontWeight: FontWeight.w600),
              ),
            ),
            Padding(
              padding: EdgeInsets.symmetric(horizontal: 30.0, vertical: 4.0),
              child: Text(
                "Lorem ipsum dolor sit amet, consectetuer adipiscing elit.",
                style: TextStyle(fontSize: 12.0),
              ),
            ),
            SizedBox(
              height: 10.0,
            ),
            AfterIntroducing(),
            SizedBox(
              height: 10.0,
            ),
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 30.0),
              child: FlatButton(
                padding: EdgeInsets.all(15.0),
                color: Colors.blue,
                textColor: Colors.white,
                onPressed: () {},
                child: Text(
                  "LOREM IPSUM",
                  style: TextStyle(fontSize: 15.0, fontWeight: FontWeight.w600),
                ),
              ),
            ),
            SizedBox(
              height: 50.0,
            ),

          ],
        ),
      ),
      floatingActionButton :  FloatingActionButton(
          child: Icon(Icons.add),
           onPressed: () {},
       )
    );
  }
}