Flutter布局：竖直分割线未显示

Question

我有一个简单的布局，由一个包含几个子元素的列组成。其中一些是包含子元素的行。我在列的子元素之间添加了分隔线，在行的子元素之间添加了垂直分隔线。水平分隔线可以正常显示，但是应用程序中无法显示垂直分隔线。

我已经尝试将行的子元素包装在其他布局小部件（如Container）中，但是没有任何效果。 屏幕截图

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Test App'),
      ),
      body: Column(
        children: <Widget>[
          Expanded(
            child: Center(
              child: Text('Hello World'),
            ),
          ),
          Divider(height: 1),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.all(40.0),
                child: Text('Row 1.1'),
              ),
              VerticalDivider(width: 1),
              Padding(
                padding: const EdgeInsets.all(40.0),
                child: Text('Row 1.2'),
              ),
            ],
          ),
          Divider(height: 1),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.all(40.0),
                child: Text('Row 2.1'),
              ),
              VerticalDivider(width: 1),
              Padding(
                padding: const EdgeInsets.all(40.0),
                child: Text('Row 2.2'),
              ),
            ],
          )
        ],
      ),
    );
  }
}

- Tidder

Answer 1

试试这个：

Container(
    height: 20,
    child: VerticalDivider(
       width: 20
       color: Colors.black,
    ),
),

它对我有效。

- Escobar

---

这个解决方案有点可行，但是VerticalDivider的高度取决于容器的高度。我更希望VerticalDivider与Row的高度匹配，而Row本身的高度取决于其内容。因此，VerticalDivider应该根据Row的大小缩小/拉伸。 - Tidder

这是我能找到的关于你所询问的问题最具体和信息量最丰富的链接，它可能会对你有所帮助 如何获取小部件的高度。 - Escobar

Answer 2

只需使用IntrinsicHeight小部件包裹Rows即可。

你的示例将如下所示

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Test App'),
      ),
      body: Column(
        children: <Widget>[
          Expanded(
            child: Center(
              child: Text('Hello World'),
            ),
          ),
          Divider(height: 1),
          IntrinsicHeight(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: <Widget>[
                Padding(
                  padding: const EdgeInsets.all(40.0),
                  child: Text('Row 1.1'),
                ),
                VerticalDivider(width: 1),
                Padding(
                  padding: const EdgeInsets.all(40.0),
                  child: Text('Row 1.2'),
                ),
              ],
            ),
          ),
          Divider(height: 1),
          IntrinsicHeight(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: <Widget>[
                Padding(
                  padding: const EdgeInsets.all(40.0),
                  child: Text('Row 2.1'),
                ),
                VerticalDivider(width: 1),
                Padding(
                  padding: const EdgeInsets.all(40.0),
                  child: Text('Row 2.2'),
                ),
              ],
            ),
          )
        ],
      ),
    );
  }
}

- user10539074

---

尽管文档说明要避免使用这种布局，但它对我的目的很有效。谢谢。 - Tidder

如果您在行中使用VerticalDividers的方式是这样的，那么VerticalDividers几乎没有用处。 - Ray Li