Flutter 布局：VerticalDividers 未显示

Question

我有一个简单的布局，由一个 Column 和几个孩子组成。其中一些是包含孩子的行。我在 Column 的孩子之间添加了 Dividers，在 Rows 的孩子之间添加了 VerticalDividers。（水平）分隔线显示良好。但是 VerticalDividers 没有显示在应用程序中。

我已经尝试将 Rows 子项包装在其他一些布局小部件（如 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'),
              ),
            ],
          )
        ],
      ),
    );
  }
}

Answer 1

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