2017-09-09 7 views
0

内のコンポーネントの上にライン:example image from mockupオーバーレイ私は私の構成要素の一つで、次のレイアウトを持っており、このようなものの上にラインを入れたいフラッター

私の現在のコードで、すでに検索しばらくの間、FlutterのAPIドキュメントを参照してください。それを達成するのに適したものが見つかりませんでした。

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

どのようにポインタやアイデアを行うには?

答えて

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

あなたはDividerStackを使用することができます。

screenshot

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), 
      ) 
      ], 
     ), 
     ), 
    ), 
    ); 
    } 
} 
関連する問題