输入几行后文本输入的底部溢出

Question

我有一个允许用户输入多行的文本字段小部件，但在输入几行后，出现溢出错误，如下所示。

发生这种情况是因为每当有新行时，文本字段的高度就会增加并向下推键盘。这是在进入新行之前。

我用resizeToAvoidBottomInset: false,解决了键盘覆盖文本框的问题，但这似乎并没有解决上面的问题。

有没有什么办法可以在输入新行后将文本字段向上推，如下所示，这样键盘文本字段就不会溢出键盘？

这是我的代码

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


class Detail extends StatefulWidget {
  const Detail({Key? key}) : super(key: key);

  @override
  State<Detail> createState() => _DetailState();
}

class _DetailState extends State<Detail> {
  final ScrollController scrollCtrl = ScrollController();
  bool isScrolled = false;
  bool isLoading = false;
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    final bottom = MediaQuery.of(context).viewInsets.bottom;
    AppBar appbar = AppBar(
      backgroundColor: Colors.transparent,
      title: const Text('Approval Detail'),
    );
    WidgetsBinding.instance!.addPostFrameCallback((timeStamp) {
      scrollCtrl.addListener(() {});
      scrollCtrl.position.isScrollingNotifier.addListener(() {
        if (!scrollCtrl.position.isScrollingNotifier.value) {
          setState(() {
            isScrolled = false;
          });
        } else {
          setState(() {
            isScrolled = true;
          });
        }
      });
    });
    return Container(
      height: MediaQuery.of(context).size.height,
      decoration: const BoxDecoration(
        image: DecorationImage(
          image: AssetImage('images/bg_home.png'),
          fit: BoxFit.fill,
        ),
      ),
      child: Scaffold(
        resizeToAvoidBottomInset: false,
        // resizeToAvoidBottomPadding: false,
        backgroundColor: Colors.transparent,
        appBar: appbar,
        body: Stack(
          children: [
            SingleChildScrollView(
              controller: scrollCtrl,
              reverse: true,
              child: Padding(
                padding: EdgeInsets.only(bottom: bottom),
                child: Column(
                  children: [
                    Padding(
                        padding: const EdgeInsets.only(bottom: 200),
                        child: Text("Detail")),
                    Container(
                      height: 25,
                      color: columnColor,
                    ),
                  ],
                ),
              ),
            ),
            IndexedStack(
              index: isScrolled
                  ? 0
                  : 1, // switch between Foo and Bar based on condition
              children: [
                Container(),
                Positioned(
                    child: Padding(
                  padding: EdgeInsets.only(
                      bottom: MediaQuery.of(context).viewInsets.bottom),
                  child: Align(
                      alignment: Alignment.bottomCenter, child: BottomWidget()),
                )),
              ],
            )
          ],
        ),
      ),
    );
  }
}

这是我的 BottomWidget

import 'package:flutter/material.dart';


class BottomWidget extends StatefulWidget {
  BottomWidget({
    Key? key,
    
  }) : super(key: key);

  @override
  State<BottomWidget> createState() => _BottomWidgetState();
}

class _BottomWidgetState extends State<BottomWidget> {
  
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 180,
      width: double.maxFinite,
      decoration: BoxDecoration(
          boxShadow: [
            BoxShadow(
              color: Colors.grey[300]!,
              offset: const Offset(0.0, 2.5),
              blurRadius: 1.0,
            ),
            const BoxShadow(
              color: Colors.black12,
              offset: Offset(0.0, 0.0),
              blurRadius: 1.0,
            ),
          ],
          color: Colors.white,
          borderRadius:
              const BorderRadius.vertical(top: Radius.circular(20.0))),
      child: Column(
        children: [
          Padding(
            padding: const EdgeInsets.fromLTRB(10, 15, 10, 0),
            child: SizedBox(
              width: double.maxFinite,
              // height: 45,
              child: Row(
                children: [
                  Flexible(
                    flex: 9,
                    child: TextField(
                      minLines: 1,
                      keyboardType: TextInputType.multiline,
                      maxLines: null,
                      decoration: InputDecoration(
                          enabledBorder: OutlineInputBorder(
                              borderRadius: BorderRadius.circular(20.0),
                              borderSide: BorderSide(color: Color(0xFFD6DDE1))),
                          focusedBorder: new OutlineInputBorder(
                            borderRadius: new BorderRadius.circular(20.0),
                            borderSide: BorderSide(color: cbossBlue),
                          ),
                          filled: true,
                          hintStyle: TextStyle(color: Color(0xFFD6DDE1)),
                          hintText: "Add note here",
                          fillColor: Colors.white70),
                    ),
                  ),
                  Flexible(
                    flex: 1,
                    child: IconButton(
                      icon: Icon(Icons.fullscreen),
                      onPressed: () {
                      },
                    ),
                  )
                ],
              ),
            ),
          ),
          Padding(
            padding: const EdgeInsets.fromLTRB(10, 15, 10, 0),
            child: Container(
              width: double.maxFinite,
              child: Row(
                mainAxisSize: MainAxisSize.max,
                mainAxisAlignment: MainAxisAlignment.start,
                children: <Widget>[
                  Flexible(
                    flex: 5,
                    child: Padding(
                      padding: const EdgeInsets.only(right: 5),
                      child: Container(
                        decoration: BoxDecoration(
                            color: Colors.white,
                            border: Border.all(color: cbossBlue),
                            borderRadius: BorderRadius.all(Radius.circular(2))),
                        height: 50,
                        child: InkWell(
                          onTap: () {
                          },
                          child: Center(
                              child: Text('Reject',
                                  style: TextStyle(
                                      color: cbossBlue,
                                      fontWeight: FontWeight.bold))),
                        ),
                      ),
                    ),
                  ),
                  Flexible(
                    flex: 5,
                    child: Padding(
                      padding: const EdgeInsets.only(right: 5),
                      child: Container(
                        decoration: BoxDecoration(
                            color: Colors.blue,
                            borderRadius: BorderRadius.all(Radius.circular(2))),
                        height: 50,
                        child: InkWell(
                          onTap: () {
                          },
                          child: const Center(
                              child: Text(
                            'Approve',
                            style: TextStyle(
                                fontWeight: FontWeight.bold,
                                color: Colors.white),
                          )),
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Answer 1

最常见的修复方法是用 SingleChildScrollView 小部件包装您的表单。

Answer 2

编辑

我为您尝试了这样的解决方案。我认为它会更简单，更容易编辑。我会拍摄一个模拟器视频并尽快添加它，到时候你可以想到解决方案。我希望它能够回答你的问题。

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: MediaQuery.of(context).size.height,
      child: Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Column(
          children: [
            Expanded(
                child: Stack(
              children: [
                ListView(
                  children: [
                    Column(
                      children: const [
                        Text("Foo"),
                        Text("Foo"),
                        Text("Foo"),
                        Text("Foo"),
                        Text("Foo"),
                        Text("Foo"),
                        Text("Foo"),
                        Text("Foo"),
                        Text("Foo"),
                        Text("Foo"),
                        Text("Foo"),
                        Text("Foo"),
                        Text("Foo"),
                        Text("Foo"),
                        Text("Foo"),
                        Text("Foo"),
                        Text("Foo"),
                        Text("Foo"),
                        Text("Foo"),
                        Text("Foo"),
                        Text("Foo"),
                        Text("Foo"),
                        Text("Foo"),
                        Text("Foo"),
                        Text("Foo"),
                        Text("Foo"),
                        Text("Foo"),
                        Text("Foo"),
                        Text("Foo"),
                        Text("Foo"),
                        Text("Foo"),
                        Text("Foo"),
                        Text("Foo"),
                        Text("Foo"),
                        Text("Foo"),
                        Text("Foo"),
                        Text("Foo"),
                        Text("Foo"),
                        Text("Foo"),
                        Text("Foo"),
                        Text("Foo"),
                        Text("Foo"),
                        Text("Foo"),
                        Text("Foo"),
                        Text("Foo"),
                        Text("Foo"),
                        Text("Foo"),
                        Text("Foo"),
                        Text("Foo"),
                        Text("Foo"),
                        Text("Foo"),
                        Text("Foo"),
                        Text("Foo"),
                        Text("Foo"),
                        Text("Foo"),
                        Text("Foo"),
                        Text("Foo"),
                        Text("Foo"),
                        Text("Foo"),
                        Text("Foo"),
                        Text("Foo"),
                        Text("Foo"),
                      ],
                    ),
                  ],
                )
              ],
            )),
            TextField(
              minLines: 1,
              keyboardType: TextInputType.multiline,
              maxLines: 5,
              decoration: InputDecoration(
                  enabledBorder: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(20.0),
                      borderSide: const BorderSide(color: Color(0xFFD6DDE1))),
                  focusedBorder: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(20.0),
                    borderSide: const BorderSide(color: Colors.blue),
                  ),
                  filled: true,
                  hintStyle: TextStyle(color: Color(0xFFD6DDE1)),
                  hintText: "Add note here",
                  fillColor: Colors.white70),
            ),
            ElevatedButton(onPressed: () {}, child: Text("Floating Texts")),
          ],
        ),
      ),
    );
  }
}

我想你想要这样的东西:) https://i.imgur.com/spxpZsZ.mp4

Answer 3

分享您的小部件树，以便我们为您提供最佳解决方案。现在，如果您有一个 Column 作为根小部件，请将其替换为 Listview。这将解决您的问题并在键盘打开时使视图可滚动。小部件树将像这样锁定：

ListView(
  children:[
    widget1(),
     widget2(),
      .....
]
)

输入几行后文本输入的底部溢出

bottom overflow for textinput after entering few lines flutter

mobile

android

dart

flutter