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

Stack Overflow用户

提问于 2019-06-25 20:30:29

回答 1查看 1.1K关注 0票数 1

我正在尝试使用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,
              );
          }),
        )
      ),
    );
  }


}

我正在尝试有一个文本在左侧和文本的右侧的文本输入字段。目前我正在显示文本，因为我不确定如何添加文本字段。另外，两个文本之间的间距太大，我想减小间距。提前感谢

到目前为止，我的输出如下

我正在寻找像下面这样的输出。我添加的每个文本字段都应该在另一个的下方对齐，并且文本应该在文本字段之间居中。下面是我正在尝试实现的一个示例。请注意文本字段是如何排列的

flutter

flutter-layout

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-06-25 21:33:19

这里有一个使用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",
                    ),
                  );
          }),
        ),
      ),