flutter 扑动/镖动-将“列”更改为“行”并显示结果“实时”

nfzehxib  于 2022-12-05  发布在  Flutter
关注(0)|答案(2)|浏览(138)

Flutter / Dart -我有一个简单的应用程序,但我是编程新手,所以很挣扎。
目前,设置是将所有TextInput框都放在一个Column中。我想将其更改为放在一个Row中。我以为这很简单,只需将第44行的Word Column替换为Row即可。但它不起作用,当我尝试运行它时,“errors_patch.dart”页面打开(我以前从未见过),在第51行有一个突出显示的错误“int assertionStart,int assertionEnd,Object”消息);“.
如何简单地从“列”更改为“行”?
如何真实的显示结果,而不需要单击“减法”按钮来获得结果?
提前感谢。

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    const appTitle = 'Help with a meal....';
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: appTitle,
      home: Scaffold(
        appBar: AppBar(
          title: const Text(appTitle),
          backgroundColor: Colors.grey,
          foregroundColor: Colors.black,
        ),
        body: const AddTwoNumbers(),
      ),
    );
  }
}

class AddTwoNumbers extends StatefulWidget {
  const AddTwoNumbers({super.key});

  @override
  // ignore: library_private_types_in_public_api
  _AddTwoNumbersState createState() => _AddTwoNumbersState();
}

class _AddTwoNumbersState extends State<AddTwoNumbers> {
  TextEditingController num1controller = TextEditingController();
  TextEditingController num2controller = TextEditingController();
  TextEditingController num3controller = TextEditingController();
  TextEditingController num4controller = TextEditingController();
  String result = "0";
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(10.0),
      child: Column(
        children: <Widget>[
          TextField(
            keyboardType: const TextInputType.numberWithOptions(decimal: true),
            controller: num1controller,
            decoration: const InputDecoration(
              border: OutlineInputBorder(),
              labelText: 'Target Level',
              hintText: 'Enter First Number',
            ),
          ),
          const SizedBox(
            height: 8,
          ),
          TextField(
            keyboardType: const TextInputType.numberWithOptions(decimal: true),
            controller: num2controller,
            decoration: const InputDecoration(
              border: OutlineInputBorder(),
              labelText: 'Current Level',
              hintText: 'Enter Second Number',
            ),
          ),
          const SizedBox(
            height: 8,
          ),
          TextField(
            keyboardType: const TextInputType.numberWithOptions(decimal: true),
            controller: num3controller,
            decoration: const InputDecoration(
              border: OutlineInputBorder(),
              labelText: 'Current Meal carbs',
              hintText: 'Enter Third Number',
            ),
          ),
          const SizedBox(
            height: 8,
          ),
          TextField(
            keyboardType: const TextInputType.numberWithOptions(decimal: true),
            controller: num4controller,
            decoration: const InputDecoration(
              border: OutlineInputBorder(),
              labelText: 'Current Meal carbs 2',
              hintText: 'Enter Fourth Number',
            ),
          ),
          const SizedBox(
            height: 8,
          ),
          Wrap(children: [
            ElevatedButton(
              style: ElevatedButton.styleFrom(
                  foregroundColor: Colors.white,
                  backgroundColor: Colors.purple),
              child: const Text("Subtraction"),
              onPressed: () {
                setState(() {
                  double sum = double.parse(num1controller.text) -
                      double.parse(num2controller.text);
                  result = sum.toStringAsFixed(1);
                });
              },
            ),
            const SizedBox(
              height: 20,
              width: 20,
            ),
          ]),
          Text('Difference between Target Level and Current Level: $result'),
        ],
      ),
    );
  }
}

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    const appTitle = 'Help with a meal....';
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: appTitle,
      home: Scaffold(
        appBar: AppBar(
          title: const Text(appTitle),
          backgroundColor: Colors.grey,
          foregroundColor: Colors.black,
        ),
        body: const AddTwoNumbers(),
      ),
    );
  }
}

class AddTwoNumbers extends StatefulWidget {
  const AddTwoNumbers({super.key});

  @override
  // ignore: library_private_types_in_public_api
  _AddTwoNumbersState createState() => _AddTwoNumbersState();
}

class _AddTwoNumbersState extends State<AddTwoNumbers> {
  TextEditingController num1controller = TextEditingController();
  TextEditingController num2controller = TextEditingController();
  TextEditingController num3controller = TextEditingController();
  TextEditingController num4controller = TextEditingController();
  String result = "0";

  _calculate() {
    if (num1controller.text.isNotEmpty && num2controller.text.isNotEmpty) {
      setState(() {
        double sum = double.parse(num1controller.text) -
            double.parse(num2controller.text);
        result = sum.toStringAsFixed(1);
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Container(
          padding: const EdgeInsets.all(10.0),
          child: Column(
            children: [
              Row(
                children: <Widget>[
                  Expanded(
                    child: TextField(
                      onChanged: (value) => _calculate(),
                      keyboardType:
                          const TextInputType.numberWithOptions(decimal: true),
                      controller: num1controller,
                      decoration: const InputDecoration(
                        border: OutlineInputBorder(),
                        labelText: 'Target Level',
                        hintText: 'Enter First Number',
                      ),
                    ),
                  ),
                  const SizedBox(
                    width: 8,
                  ),
                  Expanded(
                    child: TextField(
                      onChanged: (value) => _calculate(),
                      keyboardType:
                          const TextInputType.numberWithOptions(decimal: true),
                      controller: num2controller,
                      decoration: const InputDecoration(
                        border: OutlineInputBorder(),
                        labelText: 'Current Level',
                        hintText: 'Enter Second Number',
                      ),
                    ),
                  ),
                  const SizedBox(
                    width: 8,
                  ),
                  Expanded(
                    child: TextField(
                      onChanged: (value) => _calculate(),
                      keyboardType:
                          const TextInputType.numberWithOptions(decimal: true),
                      controller: num3controller,
                      decoration: const InputDecoration(
                        border: OutlineInputBorder(),
                        labelText: 'Current Meal carbs',
                        hintText: 'Enter Third Number',
                      ),
                    ),
                  ),
                  const SizedBox(
                    width: 8,
                  ),
                  Expanded(
                    child: TextField(
                      onChanged: (value) => _calculate(),
                      keyboardType:
                          const TextInputType.numberWithOptions(decimal: true),
                      controller: num4controller,
                      decoration: const InputDecoration(
                        border: OutlineInputBorder(),
                        labelText: 'Current Meal carbs 2',
                        hintText: 'Enter Fourth Number',
                      ),
                    ),
                  ),
                  const SizedBox(
                    width: 8,
                  ),
                ],
              ),
              Text(
                  'Difference between Target Level and Current Level: $result'),
            ],
          ),
        ),
      ),
    );
  }
}
mf98qq94

mf98qq941#

因为您要切换到Row,它不知道TextField的宽度,所以您需要用ExpandedFlexible小部件 Package 它们,使它们占据所需的空间(或者你可以给予它们一些固定的宽度,如果你愿意的话),类似于下面的解答。第二个问题的答案也在解答中,只需在每次TextField更改时调用calculate方法。

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

  @override
  // ignore: library_private_types_in_public_api
  _AddTwoNumbersState createState() => _AddTwoNumbersState();
}

class _AddTwoNumbersState extends State<AddTwoNumbers> {
  TextEditingController num1controller = TextEditingController();
  TextEditingController num2controller = TextEditingController();
  TextEditingController num3controller = TextEditingController();
  TextEditingController num4controller = TextEditingController();
  String result = "0";

  _calculate() {
    setState(() {
      double sum =
          double.parse(num1controller.text) - double.parse(num2controller.text);
      result = sum.toStringAsFixed(1);
    });
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Container(
          padding: const EdgeInsets.all(10.0),
          child: Column(
            children: [
              Row(
                children: <Widget>[
                  Expanded(
                    child: TextField(
                      onChanged: (value) => _calculate(),
                      keyboardType:
                          const TextInputType.numberWithOptions(decimal: true),
                      controller: num1controller,
                      decoration: const InputDecoration(
                        border: OutlineInputBorder(),
                        labelText: 'Target Level',
                        hintText: 'Enter First Number',
                      ),
                    ),
                  ),
                  const SizedBox(
                    width: 8,
                  ),
                  Expanded(
                    child: TextField(
                      onChanged: (value) => _calculate(),
                      keyboardType:
                          const TextInputType.numberWithOptions(decimal: true),
                      controller: num2controller,
                      decoration: const InputDecoration(
                        border: OutlineInputBorder(),
                        labelText: 'Current Level',
                        hintText: 'Enter Second Number',
                      ),
                    ),
                  ),
                  const SizedBox(
                    width: 8,
                  ),
                  Expanded(
                    child: TextField(
                      onChanged: (value) => _calculate(),
                      keyboardType:
                          const TextInputType.numberWithOptions(decimal: true),
                      controller: num3controller,
                      decoration: const InputDecoration(
                        border: OutlineInputBorder(),
                        labelText: 'Current Meal carbs',
                        hintText: 'Enter Third Number',
                      ),
                    ),
                  ),
                  const SizedBox(
                    width: 8,
                  ),
                  Expanded(
                    child: TextField(
                      onChanged: (value) => _calculate(),
                      keyboardType:
                          const TextInputType.numberWithOptions(decimal: true),
                      controller: num4controller,
                      decoration: const InputDecoration(
                        border: OutlineInputBorder(),
                        labelText: 'Current Meal carbs 2',
                        hintText: 'Enter Fourth Number',
                      ),
                    ),
                  ),
                  const SizedBox(
                    width: 8,
                  ),
                ],
              ),
              Text(
                  'Difference between Target Level and Current Level: $result'),
            ],
          ),
        ),
      ),
    );
  }
}
z5btuh9x

z5btuh9x2#

有很多方法可以实现你的目标。要将Column更改为Rows,你可以使用一个容器,其中一个列作为子项,另一个行作为子项。你可以查看documentation以获得更多帮助。
对于第二个问题,可以使用onChanged()回调或使用TextEditingController查看TextField中的实时更改。

相关问题