颤动底片改变背景高度

Question

我在我的应用程序中使用底部工作表，但它改变了背景屏幕高度。我需要修复我的背景页面。并且需要增加底片高度

这是我的底页代码

import "package:flutter/material.dart";
import 'package:flutter/services.dart';
import 'package:flutter/cupertino.dart';
import 'dart:io';

class addQuestion extends StatefulWidget {



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

class _addQuestionState extends State<addQuestion> {


  void _submitData(){

    Navigator.of(context).pop();
  }


  @override
  Widget build(BuildContext context) {
    double stackHeight = (MediaQuery.of(context).size.height);

    return Container(
      decoration: BoxDecoration(
          color: Color(0xff404040),

          borderRadius: BorderRadius.only(topLeft: Radius.circular(15.0), topRight: Radius.circular(15.0))
      ),
      child: SingleChildScrollView(
        child: Card(

          elevation: 5,
          color: Color(0xff404040),
          child: Container(
            padding: EdgeInsets.only(top: 10, left: 10, right:10,
              bottom: MediaQuery.of(context).viewInsets.bottom + 10 ,
            ),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.end,
              children: <Widget>[
                TextField(
                  maxLength: 56,
                  style: TextStyle(
                    color: Colors.white,
                  ),
                 textAlign: TextAlign.center,
                  decoration: InputDecoration(
                    counterText: '',
                      labelText: 'Would Question',
                      labelStyle: TextStyle(
                          color: Colors.blue
                      ),
                    enabledBorder: UnderlineInputBorder(
                      borderSide: BorderSide(color: Colors.blue),
                    ),
                    focusedBorder: UnderlineInputBorder(
                      borderSide: BorderSide(color: Colors.blue),
                    ),
                  ),
                  onSubmitted: (_) => _submitData(),
                ),
                TextField(
                  maxLength: 56,
                  style: TextStyle(
                    color: Colors.white,
                  ),
                  textAlign: TextAlign.center,
                  decoration: InputDecoration(
                    counterText: '',
                      labelText: 'Rather Question',
                      labelStyle: TextStyle(
                          color: Colors.red
                      ),
                    enabledBorder: UnderlineInputBorder(
                      borderSide: BorderSide(color: Colors.red),
                    ),
                    focusedBorder: UnderlineInputBorder(
                      borderSide: BorderSide(color: Colors.red),
                    ),
                  ),
                  keyboardType: TextInputType.number,
                  onSubmitted: (_) => _submitData(),
                ),

                RaisedButton(onPressed: () {
                  _submitData();

                }, child: Text('Add Question', style: TextStyle(
                    color: Colors.white
                ),),color: Theme.of(context).primaryColor,
                ),

              ],
            ),
          ),
        ),
      ),
    );
  }
}

正如您在键盘打开时看到的那样，背景页面正在向上移动。并且在底部表的圆形顺序中，它显示白色角落不知道为什么它显示需要透明或删除它。

Answer 1

材料设计中有两种bottom sheets：

持久性。一个持久的底部表格显示了补充应用程序主要内容的信息。即使用户与应用程序的其他部分进行交互，持久的底页仍然可见。可以使用 ScaffoldState.showBottomSheet 函数或通过指定 Scaffold.bottomSheet 构造函数参数来创建和显示持久底部工作表。

模态。模态底部工作表是菜单或对话框的替代品，可防止用户与应用程序的其余部分进行交互。可以使用 showModalBottomSheet 函数创建和显示模态底部工作表。

showBottomSheet 方法

class MyStatelessWidget extends StatelessWidget {
  MyStatelessWidget({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: RaisedButton(
        child: const Text('showBottomSheet'),
        onPressed: () {
          Scaffold.of(context).showBottomSheet<void>(
            (BuildContext context) {
              return Container(
                height: 200,
                color: Colors.amber,
                child: Center(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    mainAxisSize: MainAxisSize.min,
                    children: <Widget>[
                      const Text('BottomSheet'),
                      RaisedButton(
                        child: const Text('Close BottomSheet'),
                        onPressed: () => Navigator.pop(context),
                      )
                    ],
                  ),
                ),
              );
            },
          );
        },
      ),
    );
  }
}

**showModalBottomSheet 函数**

class MyStatelessWidget extends StatelessWidget {
  MyStatelessWidget({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: RaisedButton(
        child: const Text('showModalBottomSheet'),
        onPressed: () {
          showModalBottomSheet<void>(
            context: context,
            builder: (BuildContext context) {
              return Container(
                height: 200,
                color: Colors.amber,
                child: Center(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    mainAxisSize: MainAxisSize.min,
                    children: <Widget>[
                      const Text('Modal BottomSheet'),
                      RaisedButton(
                        child: const Text('Close BottomSheet'),
                        onPressed: () => Navigator.pop(context),
                      )
                    ],
                  ),
                ),
              );
            },
          );
        },
      ),
    );
  }
}

BottomSheet 小部件本身很少直接使用。相反，更喜欢使用 ScaffoldState.showBottomSheet 或 Scaffold.bottomSheet 创建一个持久的底部工作表，并使用 showModalBottomSheet 创建一个模态底部工作表。