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

Question

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

Note: I searched about this but and found out about Stack and Extended but I dont exactly know where to put them. Thank you!

这是我的代码：

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

FloatActionButton 应放在 Scaffold 中应用栏或主体的同一级别：

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

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

您还可以查看 FloatingActionButton class 文档。

Answer 2

只需将 FloatingActionButton 放在 body 外面，但放在脚手架小部件里面。

FloatingActionButton 将具有默认行为，如果您将其添加到脚手架属性 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 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: () {},
       )
    );
  }
}

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

Why is my floating action button not floating on a screen I created>

android

flutter

flutter-dependencies

flutter-layout