Flutter 布局：未显示 VerticalDividers

Posted 2023-02-23

【中文标题】Flutter 布局：未显示 VerticalDividers

【英文标题】：Flutter Layout: VerticalDividers not shown

【发布时间】：2019-10-04 16:21:17

【问题描述】：

我有一个简单的布局，它由一个列和几个子级组成。其中一些是包含子代的行。我在 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'),
              ),
            ],
          )
        ],
      ),
    );
  

【参考方案1】：

试试这个：

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

它对我有用。

【讨论】：

这种解决方案可行，但 VerticalDivider 的高度取决于容器的高度。我更有可能让 VerticalDivider 匹配行的高度，其中行本身的高度取决于它的内容。所以 VerticalDivider 应该根据行收缩/拉伸。

这是我能看到的关于您所要求的最具体和信息最丰富的链接，它可能会对您有所帮助How to get a widget's height

【参考方案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'),
                ),
              ],
            ),
          )
        ],
      ),
    );
  

【讨论】：

虽然文档声明要避免这种布局，但它适用于我的目的。谢谢。

如果这就是你在 Rows 中使用 VerticalDividers 的方式，那么 VerticalDividers 几乎没用。