Question

我试图在颤动中使用网格布局来显示多个组件，但是我在这样做时遇到了麻烦。

以下是我当前拥有的代码

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,
              );
          }),
        )
      ),
    );
  }


}

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

到目前为止，这是我的输出

im寻找类似下面的输出。我添加的每个文本框都应在另一个框下面排成一行，并且该文本应在该文本框之间居中。以下是我要完成的示例。注意文本字段阵容

Answer 1

这里有一个示例，您可以使用<figure class="woocom-project"> <div class="woo-buttons-on-img"> <a href="#" class="alignnone layzr-bg-transparent"></a> </div> <figcaption class="woocom-list-content"> <h4 class="entry-title"> <a href="#" title="product description" rel="bookmark">product description</a> </h4> <span class="custom-attributes"><span class="range alma"><span class="attribute-value">range name,</span></span><br></span> <span class="price"><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">£</span>838.00</span></span> abc123 </figcaption>而不是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

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

1 个答案: