Flutter中是否有一个内置的小部件来创建一个中间有文本的分隔符?有没有什么指南可以教你怎么做?像这样:(水平线中间的“OR”文本)here's is the screenshot of what I want to achieve
ybzsozfc1#
您可以尝试使用Row小部件。
Row( children: <Widget>[ Expanded( child: Divider() ), Text("OR"), Expanded( child: Divider() ), ] )
kuuvgm7e2#
为了扩展杰罗姆的答案-这里有一个例子,展示了如何将其与其他内容嵌入,并且还有额外的边缘插入,以便更接近您想要的实际图片:
Column(children: <Widget>[ Row( children: <Widget>[Text("above")], ), Row(children: <Widget>[ Expanded( child: new Container( margin: const EdgeInsets.only(left: 10.0, right: 20.0), child: Divider( color: Colors.black, height: 36, )), ), Text("OR"), Expanded( child: new Container( margin: const EdgeInsets.only(left: 20.0, right: 10.0), child: Divider( color: Colors.black, height: 36, )), ), ]), Row( children: <Widget>[Text("below ")], ), ])
niwlg2el3#
没有flutter小部件可以做到这一点,我为自己创建的。你可以这样做
import 'package:flutter/material.dart'; import 'package:flutter/widgets.dart'; class HorizontalOrLine extends StatelessWidget { const HorizontalOrLine({ this.label, this.height, }); final String label; final double height; @override Widget build(BuildContext context) { return Row(children: <Widget>[ Expanded( child: new Container( margin: const EdgeInsets.only(left: 10.0, right: 15.0), child: Divider( color: Colors.black, height: height, )), ), Text(label), Expanded( child: new Container( margin: const EdgeInsets.only(left: 15.0, right: 10.0), child: Divider( color: Colors.black, height: height, )), ), ]); } }
用法将是:
HorizontalOrLine(height: 10,label: "OR")
kg7wmglp4#
我把它做了一点宣福,代码是这样的
Row( mainAxisAlignment: MainAxisAlignment.center, children: const [ Expanded( child: Divider( indent: 20.0, endIndent: 10.0, thickness: 1, ), ), Text( "OR", style: TextStyle(color: Colors.blueGrey), ), Expanded( child: Divider( indent: 10.0, endIndent: 20.0, thickness: 1, ), ), ], ),
lmvvr0a85#
最好的解决方案是制作一个CustomPainter并绘制一条线请按照以下步骤操作:
CustomPainter:
class Drawhorizontalline extends CustomPainter { Paint _paint; bool reverse; Drawhorizontalline(this.reverse) { _paint = Paint() ..color = PPColors.tertiaryColor ..strokeWidth = 1 ..strokeCap = StrokeCap.round; } @override void paint(Canvas canvas, Size size) { if (reverse) { canvas.drawLine(Offset(-250.0, 0.0), Offset(-10.0, 0.0), _paint); } else { canvas.drawLine(Offset(10.0, 0.0), Offset(250.0, 0.0), _paint); } } @override bool shouldRepaint(CustomPainter oldDelegate) { return false; } }
使用此CustomPainter
Widget getSeparateDivider() { return Row( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ CustomPaint(painter: Drawhorizontalline(true)), Text( "OR", style: TextStyle( color: PPColors.primaryColor, fontWeight: FontWeight.bold, fontSize: PPUIHelper.FontSizeLarge), ), CustomPaint(painter: Drawhorizontalline(false)) ], ); }
j9per5c46#
你可以简单地使用一个容器来实现这一点:
new Container(height: 40, width: 1, color: Colors.grey, margin: const EdgeInsets.only(left: 10.0, right: 10.0),),
如果你想要一条垂直线,改变它的高度大小,并控制宽度的“厚度”。如果你想画一条水平线,在宽度/高度之间颠倒这些逻辑。在两个容器中间的行中使用它。
bprjcwpo7#
import 'package:flutter/material.dart'; class HorizontalLineTitle extends StatelessWidget { final String title; final Color color; final double lineHeight; final double lineWidth; final double paddingTop; final double paddingBottom; HorizontalLineTitle({ @required this.title, @required this.color, this.lineHeight, this.lineWidth, this.paddingTop, this.paddingBottom, }); Widget _line() { return LayoutBuilder( builder: (BuildContext context, BoxConstraints constraints) { final boxWidth = constraints.constrainWidth(); final dashWidth = lineWidth ?? 10.0; final dashHeight = lineHeight ?? 1.0; final dashCount = (boxWidth / (2 * dashWidth)).floor(); return Flex( children: List.generate(dashCount, (_) { return SizedBox( width: dashWidth, height: dashHeight, child: DecoratedBox( decoration: BoxDecoration(color: color), ), ); }), mainAxisAlignment: MainAxisAlignment.spaceBetween, direction: Axis.horizontal, ); }, ); } @override Widget build(BuildContext context) { var widgets = <Widget>[]; widgets.add(Expanded(child: _line())); if (title != null && title != '') { widgets.add(Padding( padding: EdgeInsets.fromLTRB(10, 0, 10, 0), child: Text( title, style: Theme.of(context).textTheme.title, ), )); } else { widgets.add(Container(width: 2.0)); } widgets.add(Expanded(child: _line())); return Padding( padding: EdgeInsets.fromLTRB( 0.0, paddingTop ?? 0.0, 0.0, paddingBottom ?? 0.0), child: Row( children: widgets, ), ); } }
这个小部件可以用来拥有你需要的东西,但虚线。只是想发布这个,这样人们就可以用它来定制他们的需要。
hgtggwj08#
7xllpg7q9#
另一个解决方案是使用Stackwidget,我们可以堆叠两个widget-Divider和Container。使用Stack小部件上的alignment属性,我们将所有子小部件居中。容器有两个我们需要的属性。1.padding属性:在文本周围创建边距。1.装修属性:以与背景相同的颜色填充整个空间。
Stack( alignment: Alignment.center, children: [ const Divider(), Container( padding: const EdgeInsets.all(8.0), decoration: BoxDecoration( color: Theme.of(context).scaffoldBackgroundColor, ), child: const Text( 'OR', style: TextStyle( ... ), ), ), ], ),
9条答案
按热度按时间ybzsozfc1#
您可以尝试使用Row小部件。
kuuvgm7e2#
为了扩展杰罗姆的答案-这里有一个例子,展示了如何将其与其他内容嵌入,并且还有额外的边缘插入,以便更接近您想要的实际图片:
niwlg2el3#
没有flutter小部件可以做到这一点,我为自己创建的。你可以这样做
用法将是:
kg7wmglp4#
我把它做了一点宣福,代码是这样的
lmvvr0a85#
最好的解决方案是制作一个CustomPainter并绘制一条线
请按照以下步骤操作:
CustomPainter:
使用此CustomPainter
j9per5c46#
你可以简单地使用一个容器来实现这一点:
如果你想要一条垂直线,改变它的高度大小,并控制宽度的“厚度”。
如果你想画一条水平线,在宽度/高度之间颠倒这些逻辑。
在两个容器中间的行中使用它。
bprjcwpo7#
这个小部件可以用来拥有你需要的东西,但虚线。只是想发布这个,这样人们就可以用它来定制他们的需要。
hgtggwj08#
7xllpg7q9#
另一个解决方案是使用Stackwidget,我们可以堆叠两个widget-Divider和Container。
使用Stack小部件上的alignment属性,我们将所有子小部件居中。
容器有两个我们需要的属性。
1.padding属性:在文本周围创建边距。
1.装修属性:以与背景相同的颜色填充整个空间。