Question

我试图在模态底部工作表上方显示一个// This is the public facing API that the users would interact with. public class Receiver { public Flux<Message> receive() { return streamMessagesFromService().subscribeWith(new MessageProcessor()); } } class MessageProcessor extends FluxProcessor<Message, Message> implements Subscription { // This is the server-side complete operation. private final Function<Message, Mono<Void>> completeFunction; private volatile CoreSubscriber<? super Message> downstream; @Override public void onNext(Message message) { // Let the user do whatever with that message downstream. downstream.onNext(message); // This is where it throws the IllegalStateException. completeFunction.apply(message).block(); } }，但是它不起作用。知道如何实现吗？

P.S .：将SnackBar行为设置为“浮动”无效。它仍然显示在模式底部的页面下方

谢谢

Answer 1

如果您愿意使用第三方软件包，则可以通过GetX轻松地做到这一点。

只需将软件包导入您的pubspec.yaml文件中即可：

dependencies:
  get: ^3.17.0

将您的MaterialApp更改为GetMaterialApp。

GetMaterialApp对于路线，小吃店，国际化，bottomSheets，对话框以及与路线和缺少上下文相关的高级api是必需的。

并使用Get.bottomSheet()和Get.snackbar()。您有一堆属性可以自定义这两种方法。如果BottomModalSheet已打开，并且您创建了Snackbar，则它会自动显示在图纸上方。

简单示例：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: Home(),
    );
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Snackbar above Bottom Modal Sheet'),
      ),
      body: SafeArea(
        child: Center(
          child: RaisedButton(
            child: Text('Open Modal Sheet'),
            onPressed: () {
              // Bottom Modal Sheet
              Get.bottomSheet(
                Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Text('My bottom modal sheet'),
                    RaisedButton(
                      child: Text('Show SnackBar'),
                      onPressed: () {
                        // Snackbar
                        Get.snackbar(
                          'Hey',
                          'I am a snackbar',
                          snackPosition: SnackPosition.BOTTOM,
                          backgroundColor: Colors.red,
                        );
                      },
                    ),
                  ],
                ),
                backgroundColor: Colors.green,
              );
            },
          ),
        ),
      ),
    );
  }
}

Answer 2

您将需要使用GlobalKey<ScaffoldState>在所需的脚手架中显示Snackbar，为此您可以像下面的片段一样在Scaffold中添加showModalBottomSheet；

在您的Statefull或无状态小部件类中定义您GlobalKey

final GlobalKey<ScaffoldState> _modelScaffoldKey = GlobalKey<ScaffoldState>();

在button上按即可；


                showModalBottomSheet(
                  context: context,
                  builder: (_) => Scaffold(
                      extendBody: false,
                      key: _modelScaffoldKey,
                      resizeToAvoidBottomInset: true,
                      body: FlatButton(
                        child: Text("Snackbar"),
                        onPressed: () {
                          _modelScaffoldKey.currentState.showSnackBar(SnackBar(
                            content: Text("Snackbar"),
                          ));
                        },
                      )),
                );

DartPad

Answer 3

您是否尝试过将行为属性设置为浮动？

SnackBar(
  behavior: SnackBarBehavior.floating

这应该可以解决问题

Answer 4

使用小吃店的行为属性。

<form *ngIf="userFormGroup" [formGroup]="userFormGroup">
  <div class="form-group">
    <label>FirstName</label>
    <input type="text" formControlName="firstName" class="form-control" />
  </div>
  <div class="form-group">
    <label>LastName</label>
    <input type="text" formControlName="lastName" class="form-control" />
  </div>
  <div class="form-group">
    <label>Email Address</label>
    <input type="text" formControlName="emailAddress" class="form-control" />
  </div>
  <button [disabled]="!userFormGroup.valid" class="btn btn-primary">
    Submit
  </button>
</form>

Answer 5

尝试根据Snackbar的高度为BottomSheets设置边距：

SnackBar(behavior: SnackBarBehavior.floating, margin: EdgeInsets.fromLTRB(0, 0, 0, 500),)

在模式底部工作表上方显示SnackBar

5 个答案: