Flutter反射系数复数计算器：结果不显示、布局及可展开容器问题

1. 修复计算结果不显示问题 #

原代码仅通过print输出计算结果，未更新到UI，也未触发状态刷新。修改点：

• 添加状态变量存储复数结果、模值和幅角
• 按钮点击时调用setState更新状态，触发UI刷新
• 新增结果展示区域，条件渲染计算结果

2. 调整输入框间距 #

通过SizedBox和容器内边距，控制输入框的水平、垂直间距，优化布局体验。

3. 实现右下角Logo弹出可展开容器 #

用Stack+Positioned固定右下角图标，点击后通过底部弹窗展示带ExpansionTile的可展开文本容器。

修改后的完整代码 #

import 'package:flutter/material.dart';
import 'package:extended_math/extended_math.dart';

void main() {
  runApp(const MaterialApp(
    debugShowCheckedModeBanner: false,
    home: ReflectionCoefficient(),
  ));
}

class ReflectionCoefficient extends StatefulWidget {
  const ReflectionCoefficient({Key? key}) : super(key: key);

  @override
  State<ReflectionCoefficient> createState() => _ReflectionCoefficientState();
}

class _ReflectionCoefficientState extends State<ReflectionCoefficient> {
  double rzl = 0;
  double izl = 0;
  double rzo = 0;
  double izo = 0;
  final TextEditingController controller1 = TextEditingController();
  final TextEditingController controller2 = TextEditingController();
  final TextEditingController controller3 = TextEditingController();
  final TextEditingController controller4 = TextEditingController();
  
  // 存储计算结果的状态变量
  Complex? rcValue;
  double? rcMod;
  double? rcArg;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('反射系数计算器'),
        centerTitle: true,
      ),
      body: Stack(
        children: [
          Container(
            height: double.infinity,
            width: double.infinity,
            padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 20),
            child: SingleChildScrollView(
              child: Column(
                children: [
                  // ZL实部&虚部输入行
                  Row(
                    children: [
                      Expanded(
                        child: SizedBox(
                          height: 100,
                          child: TextField(
                            controller: controller1,
                            decoration: InputDecoration(
                              labelText: "Real ZL",
                              border: OutlineInputBorder(
                                borderRadius: BorderRadius.circular(20),
                              ),
                            ),
                            keyboardType: TextInputType.number,
                          ),
                        ),
                      ),
                      const SizedBox(width: 10),
                      Expanded(
                        child: SizedBox(
                          height: 100,
                          child: TextField(
                            controller: controller2,
                            decoration: InputDecoration(
                              labelText: "Imaginary ZL",
                              border: OutlineInputBorder(
                                borderRadius: BorderRadius.circular(20),
                              ),
                            ),
                            keyboardType: TextInputType.number,
                          ),
                        ),
                      ),
                    ],
                  ),
                  const SizedBox(height: 20),

                  // Zo实部&虚部输入行
                  Row(
                    children: [
                      Expanded(
                        child: SizedBox(
                          height: 100,
                          child: TextField(
                            controller: controller3,
                            decoration: InputDecoration(
                              labelText: "Real Zo",
                              border: OutlineInputBorder(
                                borderRadius: BorderRadius.circular(20),
                              ),
                            ),
                            keyboardType: TextInputType.number,
                          ),
                        ),
                      ),
                      const SizedBox(width: 10),
                      Expanded(
                        child: SizedBox(
                          height: 100,
                          child: TextField(
                            controller: controller4,
                            decoration: InputDecoration(
                              labelText: "Imaginary Zo",
                              border: OutlineInputBorder(
                                borderRadius: BorderRadius.circular(20),
                              ),
                            ),
                            keyboardType: TextInputType.number,
                          ),
                        ),
                      ),
                    ],
                  ),
                  const SizedBox(height: 20),

                  // 计算按钮
                  SizedBox(
                    width: double.infinity,
                    child: ElevatedButton(
                      onPressed: () {
                        setState(() {
                          rzl = double.parse(controller1.text);
                          izl = double.parse(controller2.text);
                          rzo = double.parse(controller3.text);
                          izo = double.parse(controller4.text);
                          final zlValue = Complex(re: rzl, im: izl);
                          final zoValue = Complex(re: rzo, im: izo);
                          rcValue = (zlValue - zoValue) / (zlValue + zoValue);
                          rcMod = rcValue?.module;
                          rcArg = rcValue?.argument;
                        });
                      },
                      child: const Text('计算反射系数'),
                    ),
                  ),
                  const SizedBox(height: 30),

                  // 结果展示区
                  ListTile(
                    title: const Text('计算结果:', style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
                    trailing: const Icon(Icons.arrow_drop_down_circle_rounded),
                  ),
                  if (rcValue != null)
                    Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text('复数形式: ${rcValue!.re.toStringAsFixed(4)} + ${rcValue!.im.toStringAsFixed(4)}i'),
                          const SizedBox(height: 10),
                          Text('模值: ${rcMod!.toStringAsFixed(4)}'),
                          const SizedBox(height: 10),
                          Text('幅角(弧度): ${rcArg!.toStringAsFixed(4)}'),
                        ],
                      ),
                    ),
                ],
              ),
            ),
          ),
          // 右下角Logo按钮
          Positioned(
            bottom: 20,
            right: 20,
            child: IconButton(
              icon: const Icon(Icons.info_outline, color: Colors.grey, size: 36),
              onPressed: () {
                showModalBottomSheet(
                  context: context,
                  builder: (context) {
                    return Container(
                      padding: const EdgeInsets.all(20),
                      child: ExpansionTile(
                        title: const Text('关于计算器'),
                        children: [
                          const Text('这是一款用于计算传输线反射系数的工具，支持复数阻抗输入。'),
                          const SizedBox(height: 10),
                          Text('计算公式: Γ = (ZL - ZO) / (ZL + ZO)'),
                          const SizedBox(height: 10),
                          const Text('ZL为负载阻抗，ZO为特性阻抗，均为复数形式。'),
                        ],
                      ),
                    );
                  },
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}

修改说明 #

1. 结果显示修复：

   • 新增状态变量存储计算后的复数结果、模值和幅角
   • 按钮点击时通过setState更新状态，触发UI重新渲染
   • 添加条件渲染区域，当有计算结果时展示完整的反射系数信息

2. 输入框间距调整：

   • 水平相邻输入框间添加SizedBox(width:10)增加间距
   • 垂直方向的输入行、按钮间添加SizedBox(height:20)优化布局
   • 给整体容器添加内边距，避免内容贴边

3. 右下角Logo功能：

   • 通过Stack和Positioned将灰色图标固定在右下角
   • 点击图标弹出底部弹窗，内部用ExpansionTile实现可展开的文本容器，展示工具说明

内容的提问来源于stack exchange，提问作者maskrider69