Flutter中中间有文字的水平分隔线?

mbjcgjjk  于 2023-10-22  发布在  Flutter
关注(0)|答案(9)|浏览(199)

Flutter中是否有一个内置的小部件来创建一个中间有文本的分隔符?有没有什么指南可以教你怎么做?像这样:(水平线中间的“OR”文本)
here's is the screenshot of what I want to achieve

ybzsozfc

ybzsozfc1#

您可以尝试使用Row小部件。

Row(
    children: <Widget>[
        Expanded(
            child: Divider()
        ),       

        Text("OR"),        

        Expanded(
            child: Divider()
        ),
    ]
)
kuuvgm7e

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 ")],
            ),
          ])
niwlg2el

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")
kg7wmglp

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,
                          ),
                      ),
                ],
),
lmvvr0a8

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

j9per5c46#

你可以简单地使用一个容器来实现这一点:

new Container(height: 40, width: 1, color: Colors.grey,
                        margin: const EdgeInsets.only(left: 10.0, right: 10.0),),

如果你想要一条垂直线,改变它的高度大小,并控制宽度的“厚度”。
如果你想画一条水平线,在宽度/高度之间颠倒这些逻辑。
在两个容器中间的行中使用它。

bprjcwpo

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

这个小部件可以用来拥有你需要的东西,但虚线。只是想发布这个,这样人们就可以用它来定制他们的需要。

hgtggwj0

hgtggwj08#

Row(
    children: <Widget>[
        Expanded(
            child: Divider()
        ),       

        Text("OR"),        

        Expanded(
            child: Divider()
        ),
    ]
)
7xllpg7q

7xllpg7q9#

另一个解决方案是使用Stackwidget,我们可以堆叠两个widget-DividerContainer
使用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(
         ...
        ),
      ),
    ),
  ],
),

相关问题