Как исправить эту строку, вложенную в проблему исключения столбца во Flutter?

В моих кодах виджет «Строка», вложенный в виджет «Столбец», иногда вызывает исключения. Я искал и обнаружил, что вы можете вложить строку в столбец. Итак, я не могу найти причину и, что более важно, устранить исключение.

Мой основной код имеет следующий макет, как показано на диаграмме ниже: (Здесь, если виджет «Столбец» заменяется виджетом «Строка», показанным галочкой и крестиком, возникает исключение, и я не могу понять, почему и как его решить. !)

Затем я попробовал другую программу со следующей компоновкой:

В этом примере программы первая строка имеет два дочерних элемента Text и не вызывает никаких ошибок, если только мы не добавим больше дочерних элементов или не добавим длину текста, достаточную для того, чтобы вызвать переполнение на боковом краю. Итак, это развеяло мои сомнения относительно возможности вложить строку в столбец: очевидно, что мы можем.

Затем я добавил еще один виджет Row, который работал нормально до тех пор, пока содержимое не стало текстовым, с содержимым, достаточно коротким, чтобы поместиться по горизонтали, а затем я заменил дочерний элемент Text на TextField, который мне нужен и в моем основном макете. Здесь также произошло исключение.

В чем причина и как я могу это решить? Ниже приведен код второго примера макета:

import 'package:flutter/material.dart';

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

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late TextEditingController controller;
  String text = "";

  @override
  void initState() {
    super.initState();
    controller = TextEditingController();
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  bool? _isChecked = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          children: [
            const Text("First child of Column."),
            const Column(
              children: [
                Text("First child of Column nested within another Column"),
                Text(
                    "Second child of Column nested within another Column; making this line longer did not cause overflow at the side edge."),
              ],
            ),
            // Using enough children or long text in Row may cause overflow
            const Row(
              children: [
                Text("Text01"),
                Text("Text02"),
                Text("Text03"),
              ],
            ),
            Row(
              children: [
                TextField(
                  controller: controller,
                  onSubmitted: (String value) {
                    setState(() {
                      text = controller.text;
                    });
                  },
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

ОБНОВЛЕНИЕ 01:

Я попробовал обернуть внутрь Flexible и Expanded всю строку, а в остальном - только дочерние элементы (мне нужны и TextField, и CheckboxListTile подряд) строки, оба в Flexible, но ничего не помогло. Один из кодов, которые я пробовал:

        Expanded(
          child: Row(
            children: [
              TextField(
                controller: controller,
                onSubmitted: (String value) {
                  setState(() {
                    text = controller.text;
                  });
                },
              ),
              CheckboxListTile(
                value: _isChecked,
                controlAffinity: ListTileControlAffinity.leading,
                onChanged: (bool? newValue) {
                  setState(() {
                    _isChecked = newValue;
                    if (_isChecked == true) {
                      //text = "Default Value 01";
                      /*
                  controller =
                      TextEditingController(text: "Default Value 01");
                  */
                      controller.text = "Default Value 01";
                    }
                    if (_isChecked == false) {
                      //text = "";
                      /*
                  controller = TextEditingController(text: "");
                  */
                      controller.clear();
                    }
                  });
                },
                title: Text("Checkbox"),
              ),
            ],
          ),
        ),
Стоит ли изучать PHP в 2026-2027 годах?
Стоит ли изучать PHP в 2026-2027 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
0
0
67
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Вам просто нужно обернуть TextField внутри виджета Expanded или Flexible:

            Row(
              children: [
                Flexible(
                  child: TextField(
                    controller: controller,
                    onSubmitted: (String value) {
                      setState(() {
                        text = controller.text;
                      });
                    },
                  ),
                ),
              ],
            ),

или если вы собираетесь использовать только один элемент, например TextField, просто удалите строку и используйте TextField напрямую.

ОБНОВЛЯТЬ:

Если вам нужны TextField и CheckboxListTile, используйте это:

              Row(
                children: [
                  Expanded(
                    child: TextField(
                      controller: controller,
                      onSubmitted: (String value) {
                        setState(() {
                          text = controller.text;
                        });
                      },
                    ),
                  ),
                  Flexible(
                    child: CheckboxListTile(
                      value: _isChecked,
                      controlAffinity: ListTileControlAffinity.leading,
                      onChanged: (bool? newValue) {
                        setState(() {
                           _isChecked = newValue;
                          if (_isChecked == true) {
                            //text = "Default Value 01";
                            /*
                      controller =
                          TextEditingController(text: "Default Value 01");
                      */
                            controller.text = "Default Value 01";
                          }
                          if (_isChecked == false) {
                            //text = "";
                            /*
                      controller = TextEditingController(text: "");
                      */
                            controller.clear();
                          }
                        });
                      },
                      title: const Text("Checkbox"),
                    ),
                  ),
                ],
              ),

Я пробовал использовать как расширенную, так и гибкую упаковку (отдельно), но ничего не помогло. Обновите вопрос этим.

rusty 29.03.2024 05:32

проверьте мой код обновлен

diegoveloper 29.03.2024 05:45

Если вы столкнулись с ошибкой, вы можете устранить ее, обернув TextField внутри расширенного виджета или Flexible внутри Row.

          Row(
              children: [
                TextField(
                  controller: controller,
                  onSubmitted: (String value) {
                    setState(() {
                      text = controller.text;
                    });
                  },
                ),
              ],
            )

Другие вопросы по теме