如何在Flutter中将数据传递到textformfield中?

cu6pst1q  于 2022-11-17  发布在  Flutter
关注(0)|答案(2)|浏览(192)

class CardWidget extends StatefulWidget {
  final String title;
  final Color? color;
  final IconData? icon;
  final Widget? child;
  const CardWidget({
    super.key,
    required this.title,
    this.color,
    this.icon,
    this.child,
  });

  @override
  State<CardWidget> createState() => _CardWidgetState();
}

final controllers = List.generate(12, (index) => TextEditingController());

class _CardWidgetState extends State<CardWidget> {
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 200,
      width: 200,
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Card(
          elevation: 10,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(20.0),
          ),
          color: widget.color,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              Icon(
                widget.icon,
                color: Colors.white,
                size: 32,
              ),
              Center(
                child: Text(
                  widget.title,
              
              ),
              GestureDetector(
                  child: Padding(
                padding: const EdgeInsets.symmetric(
                  horizontal: 30,
                ),
                child: TextFormField(
                 
                  controller: controllers[],

                  onTap: () {
                    Navigator.push(context,
                        MaterialPageRoute(builder: ((context) => AddCard())));
                  },
                ),
              ))
            ],
          ),
        ),
      ),
    );
  }
}

用于在主页上显示CardWidget

class AddCard extends StatelessWidget {
  const AddCard({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GridView.builder(
        padding: const EdgeInsets.all(50),
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        ),
        itemCount: 12,
         itemBuilder: (context, index) => ItemTile(
          cardNo: index,
          callback: (p0) {
            controllers[index].text = p0.toString();
          })),
      ),
    );
  }
}

单击TextFormField时重定向用户的页面。

class ItemTile extends StatelessWidget {
  final int cardNo;

  const ItemTile(
    this.cardNo,
  );

  @override
  Widget build(BuildContext context) {
    return  ListTile(
        onTap: () { 
        },
        title: Center(
          child: Text(
            'Tuş ${cardNo + 1}',
            key: Key('text_$cardNo'),
          ),
        ),
      ),
    );
  }

我有卡片1到12,每张卡片里面都有数字1到12。当用户点击卡片时,我想把这些文本传递给TextFormField
在我的主页上有12个卡片设计。在每个卡片中都有一个textFormField。当单击TextFormField时,它会转到我在AddCard中使用GridView创建的列表。该列表中有12个元素。在这12个元素中有从1到12的数字。当我单击其中一个元素时,我希望那里的数字被分配给我所单击的元素。在主页上的12个textFormField中。

v6ylcynt

v6ylcynt1#

在ListTile ontap上,使用导航器弹出窗口并在第二个位置传递数据。

onTap: () {
          Navigator.pop(context, "cardNo");
        },

在主文件上

child: TextFormField(
   controller: controllers[1], /// your TextFiled index
    onTap: () async{
    final data  = await Navigator.push(context,
      MaterialPageRoute(builder: ((context) => AddCard())));
  controllers[1].text  = "$data";
 },
    ),

您可以使用回调方法,为将来的情况传递数据,或者可以只使用VoidCallback

class ItemTile extends StatelessWidget {
  final int cardNo;
  final Function(int) callback;

  const ItemTile({
    Key? key,
    required this.cardNo,
    required this.callback,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final Color color = Colors.primaries[cardNo % Colors.primaries.length];
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 20),
      child: ListTile(
        tileColor: color.withOpacity(0.3),
        onTap: () {
          callback(cardNo);
        },
        title: Center(
          child: Text(
            'Tuş ${cardNo + 1}',
            key: Key('text_$cardNo'),
          ),
        ),
      ),
    );
  }
}

你可以得到如下的值

itemBuilder: (context, index) => ItemTile(
    cardNo: index,
    callback: (p0) {
      _controller.text = p0.toString();
    }),
cnjp1d6j

cnjp1d6j2#

TextEditingController设置为全局作用域,并且不要将其设置为_专用

final myController = TextEditingController();

然后在TextFormField中使用它:

TextFormField(
          controller: myController,
          onTap: () {
            Navigator.push(context,
                MaterialPageRoute(builder: ((context) => AddCard())));
          },
        ),

现在在ListTileonTap中,将一个值赋给TextFormField

onTap: () { 
 myController.text = "your text value";     
 },

相关问题