flutter - Flutter 中的溢出问题

Question

遇到此问题时我正在使用文本字段。我在文本字段下方放置了一个平面按钮。现在，发生的事情是，当我点击文本字段写入任何内容时，我的移动键盘就会出现。直到这里一切似乎都很正常。现在，当我在文本字段中输入任何数据并按移动键盘上的完成按钮后，移动键盘就会消失。我可以按文本字段下方的平面按钮。如果我这样做，一切都会顺利进行。 但......... 当我在文本字段中输入任何数据时，如果我直接点击放置的平面按钮，而不按移动键盘上的完成按钮，那么我会看到一秒钟的溢出消息。尽管溢出消息只出现一秒钟，但它仍然很烦人。我不知道我应该做什么。请帮我。 我附上了一个显示问题的小视频链接。在视频录制中，我点击了移动键盘上的“完成”按钮，然后点击了平面按钮。然后，第二次，我再次在文本字段中输入了一些内容，并且没有按完成按钮，而是点击了平面按钮。您还将看到溢出警告。 请 friend 们帮助我。谢谢!!

Here is a recording of the problem that I have been facing. Please have a look at it and help me. Thanks!!

Container(
  padding: EdgeInsets.all(20.0),
  child: TextField(
    style: TextStyle(
      color: Colors.black,
      fontSize: 18,
    ),
    decoration: kTextFieldInputDecoration,
    onChanged: (value) {
      cityName = value;
    },
  ),
),

Answer 1

请引用此文档 https://medium.com/@rubensdemelo/flutter-forms-improving-ui-ux-with-singlechildscrollview-7b91aa981475

您可以使用 SingleChildScrollView 包装容器

示例代码

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

void main() {
  SystemChrome.setEnabledSystemUIOverlays([]);
  runApp(
    MyApp(),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Forms',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Forms'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  final TextStyle textstyle =
      TextStyle(color: Colors.white, fontWeight: FontWeight.bold);
  final InputDecoration decoration = InputDecoration(
    border: OutlineInputBorder(),
  );
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: SingleChildScrollView(
          padding: const EdgeInsets.all(8.0),
          child: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                FlutterLogo(
                  size: 190,
                ),
                SizedBox(
                  height: 15,
                ),
                TextFormField(
                  decoration: decoration,
                ),
                SizedBox(
                  height: 15,
                ),
                TextFormField(
                  decoration: decoration,
                ),
                SizedBox(
                  height: 15,
                ),
                MaterialButton(
                  color: Colors.red,
                  minWidth: 160,
                  child: Text(
                    'Google',
                    style: textstyle,
                  ),
                ),
                MaterialButton(
                  color: Colors.blue,
                  minWidth: 160,
                  child: Text(
                    'Facebook',
                    style: textstyle,
                  ),
                ),
                MaterialButton(
                  color: Colors.orange,
                  minWidth: 160,
                  child: Text(
                    'E-mail',
                    style: textstyle,
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}