Flutter 如何制作两个显示相关内容且可编辑的文本字段

试试看这个例子:

import 'package:flutter/material.dart';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final btcTextController = TextEditingController();
  final usdtTextController = TextEditingController();
  final btcFocusNode = FocusNode();
  final usdtFocusNode = FocusNode();
  double btcValue = 15; 
  double usdTValue = 1; 

  String curSelection = "";

  @override
  void initState() {
    btcTextController.addListener(calcBTC);
    usdtTextController.addListener(calcUSDT);
    super.initState();
  }

  void calcBTC() {
    if (btcFocusNode.hasFocus) {
      usdtTextController.clear();
      if (btcTextController.text.isNotEmpty &&
          double.tryParse(btcTextController.text) != null) {
        setState(() {
          usdtTextController.text =
              (double.parse(btcTextController.text) * (btcValue / usdTValue))
                  .toString();
        });
      }
    }
  }

  void calcUSDT() {
    if (usdtFocusNode.hasFocus) {
      btcTextController.clear();
      if (usdtTextController.text.isNotEmpty &&
          double.tryParse(usdtTextController.text) != null) {
        setState(() {
          btcTextController.text =
              (double.parse(usdtTextController.text) * (usdTValue / btcValue))
                  .toString();
        });
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: Card(
            color: Colors.white,
            shape:
                RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
            elevation: 4,
            child: Container(
              margin: const EdgeInsets.all(10),
              width: 300,
              height: 300,
              child: Column(
                children: [
                  Expanded(
                    child: TextField(
                      style: const TextStyle(color: Colors.black),
                      controller: btcTextController,
                      focusNode: btcFocusNode,
                      decoration: InputDecoration(
                          filled: true,
                          fillColor: Colors.blue.shade100,
                          labelText: 'BTC',
                          labelStyle: const TextStyle(color: Colors.pink),
                          border: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(10),
                            borderSide: BorderSide.none,
                          )),
                    ),
                  ),
                  Expanded(
                      child: TextField(
                        style: const TextStyle(color: Colors.black),
                    controller: usdtTextController,
                    focusNode: usdtFocusNode,
                    decoration: InputDecoration(
                      
                        filled: true,
                        fillColor: Colors.blue.shade100,
                        labelText: 'USDT',
                        labelStyle: const TextStyle(color: Colors.pink),
                        border: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(10),
                          borderSide: BorderSide.none,
                        )),
                  )),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

您将需要添加更多的验证等.此外，您还可以使用一个单独的函数来进行计算，并使用FocusNodes来决定需要对哪一方进行计算.