Flutter 中的溢出问题答案

【问题标题】：Overflow Issue in FlutterFlutter 中的溢出问题
【发布时间】：2019-12-24 02:17:12
【问题描述】：

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

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;
              },
            ),
          ),

【问题讨论】：

在你的代码中使用SingleChildScrollView。

标签： flutter dart

【解决方案1】：

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

你可以用 SingleChildScrollView 包裹你的 Container

示例代码

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,
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

【讨论】：