颤振-垂直分隔器和水平分隔器

在 Flutter 中,是否有一个选项可以像在图像中那样在组件之间绘制垂直线。

enter image description here

140184 次浏览

Not as far as I know. However, it is quite simple to create one — if you look at the source for Flutter's Divider you'll see that it is simply a SizedBox with a single (bottom) border. You could do the same but with dimensions switched.


Update (Oct 4, 2018): a VerticalDivider implementation has been merged in by the Flutter team. Check out the docs but it's very simple to use — simply put it between two other items in a row.

Note: If you are using VerticalDivider as separator in Row widget then wrap Row with IntrinsicHeight , Container or SizedBox else VerticalDivider will not show up. For Container and SizedBox widget you need define height.

import 'package:flutter/material.dart';
class VerticalDivider extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Container(
height: 30.0,
width: 1.0,
color: Colors.white30,
margin: const EdgeInsets.only(left: 10.0, right: 10.0),
);
}
}

Try RotatedBox in combination with a divider to get it vertical, RotatedBox is a widget of flutter that automatically rotates it's child based on the quarterTurn property you have to specify. Head over to here for a detailed explanation https://docs.flutter.io/flutter/widgets/RotatedBox-class.html

As @rwynnchristian suggested, this seems to be the simplest solution IMO. Just leaving the code here:

import 'package:flutter/material.dart';
class VerticalDivider extends StatelessWidget {
@override
Widget build(BuildContext context) => RotatedBox(
quarterTurns: 1,
child: Divider(),
);
}

add this method anywhere.

  _verticalDivider() => BoxDecoration(
border: Border(
right: BorderSide(
color: Theme.of(context).dividerColor,
width: 0.5,
),
),
);

now wrap your content in container

Container(
decoration: _verticalDivider(),
child: //your widget code
);

As of 10 days ago, flutter has merged a VerticalDivider implementation. It will be available in the default channel very soon, but for now you have to switch to the dev channel to use it: flutter channel dev.

Here is a example of how to use it:

IntrinsicHeight(
child: new Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Text('Foo'),
VerticalDivider(),
Text('Bar'),
VerticalDivider(),
Text('Baz'),
],
))

Tried with VerticalDivider() but cannot get any divider. I Solved it with

 Container(color: Colors.black45, height: 50, width: 2,),


Vertical divider:

  • As a direct child:

    VerticalDivider(
    color: Colors.black,
    thickness: 2,
    )
    
  • In a Row:

    enter image description here

    IntrinsicHeight(
    child: Row(
    children: [
    Text('Hello'),
    VerticalDivider(
    color: Colors.black,
    thickness: 2,
    ),
    Text('World'),
    ],
    ),
    )
    

Horizontal divider:

  • As a direct child:

    Divider(
    color: Colors.black,
    thickness: 2,
    )
    
  • In a Column:

    enter image description here

    IntrinsicWidth(
    child: Column(
    children: [
    Text('Hello'),
    Divider(
    color: Colors.black,
    thickness: 2,
    ),
    Text('World'),
    ],
    ),
    )
    

Try to wrap it inside the Container with some height as

Container(height: 80, child: VerticalDivider(color: Colors.red)),

You can use a vertical divider with a thickness of 1.

          VerticalDivider(
thickness: 1,
color: Color(0xFFF6F4F4),
),

And if you can't see the vertical divider wrap the row with a IntrinsicHeight widget.

Use Container for divider is easy, wrap your row in IntrinsicHeight()

enter image description here

          IntrinsicHeight(
child: Row(
children: [
Text(
'Admissions',
style: TextStyle(fontSize: 34),
),
Container(width: 1, color: Colors.black), // This is divider
Text('another text'),
],
),

You need to wrap VerticalDivider() widget with the IntrinsicHeight widget. Otherwise, the vertical divider will not show up. And to gain some padding over the top and bottom you can add indent.

IntrinsicHeight(
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Flexible(
child: VerticalDivider(
thickness: 0.8,
color: Colors.grey,
),
),
Flexible(
child: Text(
"Random Text",
style: TextStyle(
fontSize: 12,
color: AppColor.darkHintTextColor,),
),
),
],
),
)

Just wrap your Row in IntrinsicHeight widget and you should get the desired result:

IntrinsicHeight(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Text('Name'),
VerticalDivider(),
Text('Contact'),
],
))

I guess i found a more robust solution when dealing with this problem;enter image description here

IntrinsicHeight(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(
child: Container(
decoration: BoxDecoration(borderRadius: BoxRadius.circular(),color: Colors.gray),
height: 5,
margin: CustomPaddings.horizontal(),
),
),
Text(
"TEST",
style: Theme.of(context)
.textTheme
.subtitle1!
.copyWith(
color: Colors.black,
fontWeight: FontWeight.bold),
),
Expanded(
child: Container(
decoration: BoxDecoration(borderRadius: BoxRadius.circular(),color: Colors.gray),
height: 5,
margin: CustomPaddings.horizontal(),
),
),
],
),
),