Question

我在其中一个组件中有以下布局，并希望在其上添加一行：

这是我目前的代码，已经在Flutter的API文档中搜索了一段时间，并没有找到适合实现的东西。

new Row(
  children: <Widget>[
    new Expanded(
      child: const Text("Some text"),
    ),
    const Text("Some other text"),
  ],
)

任何指针或想法如何做到这一点？

Answer 1

好。通过使用自定义Decoration来实现它这是我的代码：

class StrikeThroughDecoration extends Decoration {
  @override
  BoxPainter createBoxPainter([VoidCallback onChanged]) {
    return new _StrikeThroughPainter();
  }
}

class _StrikeThroughPainter extends BoxPainter {
  @override
  void paint(Canvas canvas, Offset offset, ImageConfiguration configuration) {
    final paint = new Paint()
      ..strokeWidth = 1.0
      ..color = Colors.black
      ..style = PaintingStyle.fill;

    final rect = offset & configuration.size;
    canvas.drawLine(new Offset(rect.left, rect.top + rect.height / 2), new Offset(rect.right, rect.top + rect.height / 2), paint);
    canvas.restore();
  }
}

在我的组件中使用：

new Container(
  foregroundDecoration: new StrikeThroughDecoration(),
  child: new Row(
    children: <Widget>[
      new Expanded(
        child: const Text("Some text"),
      ),
      const Text("Some other text"),
    ],
  )
)

Answer 2

您可以将Stack与Divider一起使用。

import 'dart:async';
import 'package:flutter/material.dart';

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(title: new Text('Example App')),
      body: new Padding(
        padding: new EdgeInsets.all(5.0),
        child: new Center(
          child: new Stack(
            children: <Widget>[
              new Row(
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisSize: MainAxisSize.max,
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  new Text('Hello world'),
                  new Text('Some other text'),
                ],
              ),
              new Positioned.fill(
                left: 0.0,
                right: 0.0,
                child: new Divider(color: Colors.black),
              )
            ],
          ),
        ),
      ),
    );
  }
}

在Flutter中的组件顶部叠加一条线

2 个答案: