使用网格布局的文本和文本字段

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

以上是关于使用网格布局的文本和文本字段的主要内容,如果未能解决你的问题,请参考以下文章

你知道标签+文本框数据输入布局的更动态的网格吗?

网格布局与侧边栏重叠

在 Qt 表单的不同布局中调整按钮大小

使用属性窗口在 QT 网格布局中设置小部件的行和列

如何在引导流体布局中底部对齐网格元素

Tkinter 网格动态布局