2017-09-09 6 views
0

je la disposition suivante dans un de mes composants et que vous souhaitez mettre une ligne au-dessus de ce comme ceci: example image from mockupOverlay une ligne au-dessus d'un composant dans Flutter

C'est mon code actuel et déjà recherché à travers la documentation API de Flutter pendant un moment maintenant et n'a pas trouvé quelque chose de convenable pour y parvenir.

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

Des pointeurs ou des idées pour faire cela?

Répondre

1

OK. Je l'ai fait en utilisant un Decoration personnalisé.
Voici mon code:

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

Utilisé comme dans mon élément:

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

Vous pouvez utiliser un Stack avec un Divider.

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