flutter - 使用网格布局的文本和文本字段
问题描述
我试图在颤动中使用网格布局来显示多个组件,但我在做这件事时遇到了麻烦。
以下是我拥有的当前代码
import 'package:flutter/material.dart';
import 'package:finsec/widget/text_form_field.dart';
void main() {
runApp(MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Simple Interest Calculator App',
home: ThirdFragment(),
theme: ThemeData(
brightness: Brightness.dark,
primaryColor: Colors.indigo,
accentColor: Colors.indigoAccent),
));
}
class ThirdFragment extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return _ThirdFragmentState();
}
}
class _ThirdFragmentState extends State<ThirdFragment> {
var _formKey = GlobalKey<FormState>();
var _currencies = ['Rupees', 'Dollars', 'Pounds'];
final double _minimumPadding = 5.0;
var _currentItemSelected = '';
@override
void initState() {
super.initState();
_currentItemSelected = _currencies[0];
// principalController.addListener(onChange);
}
TextEditingController principalController = TextEditingController();
TextEditingController roiController = TextEditingController();
TextEditingController termController = TextEditingController();
var displayResult = '';
@override
Widget build(BuildContext context) {
TextStyle textStyle = Theme.of(context).textTheme.title;
return Scaffold(
// resizeToAvoidBottomPadding: false,
appBar: AppBar(
title: Text('Simple Interest Calculator'),
),
body: Form(
key: _formKey,
child: GridView.count(
crossAxisCount: 2,
crossAxisSpacing: 0,
padding: const EdgeInsets.all(10.0),
children: List.generate(2, (index) {
return
Text(
'Item $index',
style: Theme.of(context).textTheme.headline,
);
}),
)
),
);
}
}
我试图在左侧有一个文本,在文本右侧有一个文本输入字段。目前我正在显示文本,因为我不确定如何添加文本字段。另外,两个文本之间的间距太大,我想减小间距。提前致谢
这是我到目前为止的输出
我正在寻找像下面这样的输出。我添加的每个文本字段都应在另一个下方排列,并且文本应位于文本字段之间。下面是我想要完成的一个例子。注意文本字段是如何排列的
解决方案
在这里,您有一个示例可以使用ListView.builder
而不是GridView
.
Form(
key: _formKey,
child: ListView.builder(
padding: const EdgeInsets.all(10.0),
itemCount: 10,
itemBuilder: (context, index) {
return Row(children: [
Expanded(
child: Text(
'Item $index',
maxLines: 1,
style: Theme.of(context).textTheme.headline,
),
),
Expanded(
flex: 2,
child: TextField(
decoration: InputDecoration(
hintText: "Hint $index",
),
),
),
]);
}),
),
如果还需要使用GridView
,可以使用以下逻辑:
Form(
key: _formKey,
child: GridView.count(
crossAxisCount: 2,
crossAxisSpacing: 0,
padding: const EdgeInsets.all(10.0),
children: List.generate(10, (index) {
return index.isEven
? Text(
'Item $index',
style: Theme.of(context).textTheme.headline,
)
: TextField(
decoration: InputDecoration(
hintText: "Hint $index",
),
);
}),
),
),
推荐阅读
- javascript - 在用户输入时从输入字段创建“下拉菜单”
- javascript - 如何制作一个功能,在按下暂停按钮后,3秒后自动恢复音频?
- c# - ASP.Net 核心 Azure Webjob (SDK 3.0.10) DI 无法解析
- c# - 申请未关闭
- javascript - 没有从另一个函数中执行的函数
- excel - 如何突出显示列中非空白的重复项?
- javascript - React + Apollo + 缓存 + refetchQueries ;缓存更新在突变后被覆盖
- python - 如何循环将新列添加到具有值的熊猫数据框基于其他列值
- python - Swagger / OpenAPI 规范以文件上传为特色,被 Google Endpoints 拒绝
- node.js - 如何从本地主机向我的 docker 容器发送 HTTP 请求?