如何修复Flutter中Row嵌套在Column异常问题？

Question

在我的代码中，嵌套在列小部件中的行小部件有时会导致异常。我搜索并发现您可以将行嵌套在列中。因此，我无法找到原因，更重要的是无法找到异常的修复方法。

我的主要代码的布局如下图所示：（这里，如果将Column widget替换为Row widget，通过标记勾号和叉号显示，就会出现异常，我不明白为什么以及如何解决它！）

然后，我尝试了另一个具有以下布局的程序：

在此示例程序中，第一行有两个 Text 子项，不会导致任何错误，除非我们添加更多子项或文本长度足以导致侧边溢出。因此，这消除了我是否可以在列中嵌套行的疑问：显然我们可以。

然后我添加了另一个 Row 小部件，这很好，直到内容是文本，内容足够短以适合水平放置，然后我用我的主布局中也需要的 TextField 替换了 Text 子项，这里也发生了异常.

这是什么原因以及如何解决？下面是第二个示例布局的代码：

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;
                    });
                  },
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

Answer 1

如果担心行中长文本溢出，可以让文本在行内展开。

Row(

children:[

Text('short'),

Expanded(
child: Text(
 'very long very long very long very long very long very long',
 // handle overflow also
  overflow: TextOverflow.ellipsis,

   )
  )
 ]
) 

顺便说一句，您应该用

SingleChildScrollView

包裹整个列以处理垂直溢出。

希望对您有帮助。