我有一个简单的布局，其中包含一个 Column 和几个 child 。其中一些是包含子项的行。我在 Column 的子项之间添加了 Dividers，在 Rows 的子项之间添加了 VerticalDividers。 (水平)分隔线显示良好。但是，VerticalDividers 未显示在应用程序中。

我已经尝试过将 Rows 子项包装在其他一些布局小部件(如 Container)中，但似乎没有任何效果。

Screenshot

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

最佳答案

只需用 IntrinsicHeight 小部件包裹行

你的例子看起来像

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

关于 flutter 布局 : VerticalDividers not shown，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56184641/