【发布时间】：2021-04-07 09:09:43
【问题描述】：
所以我是 Flutter 的新手，也许我已经完全搞砸了表单，但我遇到了这种奇怪的行为，表单在 Mac OS 下的浏览器中工作得很好，但在 Windows 或 iOS 上的浏览器中根本不工作.所谓工作，是指能够使用按钮提交数据。
这似乎是一个时髦的布局的问题：控件相互覆盖，但我不确定为什么在 Windows 和 iOS 上会发生这种情况，但在 macOS 上却没有。它在浏览器之间是一致的：它似乎在 mac 上的每个浏览器中都可以正常工作，而在 iOS 或 Windows 上的任何浏览器中都不能正常工作。
Flutter 1.25.0-8.1.pre • 频道测试版 • https://github.com/flutter/flutter.git 框架 • 修订版 8f89f6505b（2 周前） • 2020-12-15 15:07:52 -0800 引擎 • 修订版 92ae191c17 工具 • Dart 2.12.0（内部版本 2.12.0-133.2.beta）
WORKS：（可以在字段中输入数据，点击提交，数据显示在下方） macOS Catalina 版本 10.15.7 Firefox：84.0.1，Chrome：87.0.4280.88（官方版本）（x86_64）， Safari：14.0.1（15610.2.11.51.10、15610）
不工作（选择字段是flakey，按钮不可按下，无法提交数据） Windows 10 专业版 20H2、Firefox 84.6.1、Edge iOS 14.2 Safari、Firefox、Chrome（最新版本）
我正在使用 nginx/1.18.0 (Ubuntu) 为 Flutter Web 构建提供服务。
form_widget.dart：
import 'package:field_test/helpers/size_helpers.dart';
import 'package:flutter/material.dart';
class FormWidget extends StatefulWidget {
@override
State<StatefulWidget> createState() => _FormWidgetState();
}
class _FormWidgetState extends State<FormWidget> {
String _keywords, _keywords_display = "";
String _type, _type_display = "";
String _state, _state_display = "";
final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
Widget _buildKeywordsField() {
return TextFormField(
decoration: InputDecoration(labelText: 'Keywords'),
onSaved: (String value) {
_keywords = value;
print(_keywords + "saved");
}
);
}
Widget _buildTypeField() {
return TextFormField(
decoration: InputDecoration(labelText: 'Type'),
onSaved: (String value) {
_type = value;
print(_type + "saved");
}
);
}
Widget _buildStateField() {
return TextFormField(
decoration: InputDecoration(labelText: 'State'),
onSaved: (String value) {
_state = value;
print(_state + "saved");
}
);
}
void _update() {
print("update called");
setState(() {
_keywords_display = _keywords;
_type_display = _type;
_state_display = _state;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Form Widget",
style: TextStyle(
color: Colors.white, fontWeight: FontWeight.bold
)
)
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget> [
Expanded(
child: Container(
margin: EdgeInsets.all(24),
child: Form(
key: _formKey,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget> [
_buildKeywordsField(),
_buildTypeField(),
_buildStateField(),
SizedBox(height: 15),
RaisedButton(
child: Text(
'Search',
style: TextStyle(color: Colors.white, fontSize: 16),
),
onPressed: () => {
_formKey.currentState.save(),
_update(),
}
)
]
)
)
)
),
Container(
width: displayWidth(context) * .95,
height: displayHeight(context) * .75,
child:
Builder(
builder: (_) {
return ListView.separated(
separatorBuilder: (_, __) =>
Divider(height: 1, color: Colors.orange),
itemBuilder: (_, index) {
return ListTile(
isThreeLine: true,
title: Text(
"Keywords: " + _keywords_display,
style: TextStyle(color: Theme.of(context).primaryColor),
),
subtitle: Text(
"Type: " + _type_display + "\nState: " + _state_display,
maxLines: 2,
),
);
},
itemCount: 1,
);
}),
)]
)
)
);
}
}
size_helpers.dart：
import 'package:flutter/material.dart';
Size displaySize(BuildContext context) {
return MediaQuery.of(context).size;
}
double displayHeight(BuildContext context) {
return displaySize(context).height;
}
double displayWidth(BuildContext context) {
return displaySize(context).width;
}
main.dart：
import 'package:field_test/widgets/form_widget.dart';
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.orange,
),
home: FormWidget(),
);
}
}
【问题讨论】：
标签： windows forms flutter google-chrome web