使用网格布局的文本和文本字段
Posted
技术标签:
【中文标题】使用网格布局的文本和文本字段【英文标题】:text and textfield using grid layout 【发布时间】:2019-11-07 17:42:33 【问题描述】:我试图在 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,
);
),
)
),
);
我试图在左侧有一个文本,在文本右侧有一个文本输入字段。目前我正在显示文本,因为我不确定如何添加文本字段。另外,两个文本之间的间距太大,我想减小间距。提前谢谢
这是我目前的输出
我正在寻找如下所示的输出。我添加的每个文本字段都应在另一个下方排列,并且文本应位于文本字段之间的中心。 下面是我想要完成的一个例子。注意文本字段如何 是阵容
【问题讨论】:
为什么不使用 List 而不是 GridView/ 【参考方案1】:这里有一个使用 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",
),
);
),
),
),
【讨论】:
您好 Diegoveloper,感谢您的帮助。它看起来不错,但文本和文本字段相距甚远。我需要文本和文本字段彼此之间只有几个空格。检查我添加的图像。如何更改代码以使文本和文本字段彼此之间只有几个空格? 当然,检查我更新的代码,第一个,我刚刚为 TextField 添加了一个 flex 值到 '2' 和 maxLines: 1 为 Text以上是关于使用网格布局的文本和文本字段的主要内容,如果未能解决你的问题,请参考以下文章