Question

我能够从表单中检索值并将其传递给getBox（）小部件，但数据将传递到Grid中的所有项目。

如何将表单中的数据而不是全部添加到第二个容器中？

List<Widget> getBox(var data) {
  var list = ['a', '2', '3', '4', '5', '6', '7', '8', '9'];

  return list.map((String string) {
    return Container(
      margin: const EdgeInsets.all(2.0),
      padding: const EdgeInsets.all(5.0),
      decoration: myBoxDecoration(),
      child: Text(data),
    );
  }).toList();
}

完整的呈现Gridview和底部的窗体。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: TextInputValue(),
    );
  }
}

class TextInputValue extends StatefulWidget {
  @override
  _TextInputValueState createState() => _TextInputValueState();
}

class _TextInputValueState extends State<TextInputValue> {
  final _textInputController = TextEditingController();

  String showText = "";

  _TextInputValueState({this.showText});

  _onPressed() {
    setState(() {
      showText = _textInputController.text;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Text Input Value'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Expanded(
                child: GridView.count(
                  crossAxisCount: 4,
                  children: getBox(showText),
                ),
              ),
              Text("Submitted Text: $showText"),
              Padding(
                padding: const EdgeInsets.all(15.0),
                child: TextFormField(
                  controller: _textInputController,
                  decoration: InputDecoration(hintText: 'Enter a Text here'),
                ),
              ),
              RaisedButton(
                onPressed: _onPressed,
                child: Text('Submit'),
              ),
              SizedBox(
                height: 300.0,
              ),
            ],
          ),
        ));
  }
}

List<Widget> getBox(var data) {
  var list = ['a', '2', '3', '4', '5', '6', '7', '8', '9'];

  return list.map((String string) {
    return Container(
      margin: const EdgeInsets.all(2.0),
      padding: const EdgeInsets.all(5.0),
      decoration: myBoxDecoration(),
      child: Text(data),
    );
  }).toList();
}

BoxDecoration myBoxDecoration() {
  return BoxDecoration(
    border: Border.all(width: .1),
  );
}

Answer 1

使用条件语句返回第二个容器。

 List<Widget> getBox(var data) {
  var list = ['a', '2', '3', '4', '5', '6', '7', '8', '9'];

  return list.map((String string) {
    return list.indexOf(string) == 1 ?Container(
      margin: const EdgeInsets.all(2.0),
      padding: const EdgeInsets.all(5.0),
      decoration: myBoxDecoration(),
      child: Text(data),
    ): Container();
  }).toList();
}

将数据添加到特定的GridView项目

1 个答案: