2017-07-18 6 views
0

Wie kann ich die hervorgehobene Bürokratie bei Flutter loswerden, wenn mein Inhalt über den Bildschirm hinausgeht? Es könnte mit dem Debug-Modus zusammenhängen, weil ich es bei der Veröffentlichung nicht sehe, aber es wäre nett, meine Builds weiterhin im Debug-Modus ohne sie laufen zu lassen.Entfernen von hervorgehobenen roten Streifen auf Flutter

EDIT: Hier ist ein Beispiel für eine Implementierung, die überlaufen:

class OverflowExample extends StatefulWidget { 
@override 
State createState() { 
    return new OverflowExampleState(); 
} 
} 

class OverflowExampleState extends State<OverflowExample> { 
@override 
Widget build(BuildContext context) { 
    return new Row(
     children: [ 
      new column(
       new Container(height: 100, width: 200), 
       new Container(height: 100, width: 200), 
       new Container(height: 100, width: 200), 
       new Container(height: 100, width: 200), 
       new Container(height: 100, width: 200), 
       new Container(height: 100, width: 200), 
       new Container(height: 100, width: 200), 
      ), 
      new column(
       new Container(height: 100, width: 200), 
       new Container(height: 100, width: 200), 
       new Container(height: 100, width: 200), 
       new Container(height: 100, width: 200), 
       new Container(height: 100, width: 200), 
       new Container(height: 100, width: 200), 
       new Container(height: 100, width: 200), 
      ), 
      new column(
       new Container(height: 100, width: 200), 
       new Container(height: 100, width: 200), 
       new Container(height: 100, width: 200), 
       new Container(height: 100, width: 200), 
       new Container(height: 100, width: 200), 
       new Container(height: 100, width: 200), 
       new Container(height: 100, width: 200), 
      ), 
      new column(
       new Container(height: 100, width: 200), 
       new Container(height: 100, width: 200), 
       new Container(height: 100, width: 200), 
       new Container(height: 100, width: 200), 
       new Container(height: 100, width: 200), 
       new Container(height: 100, width: 200), 
       new Container(height: 100, width: 200), 
      ), 
      new column(
       new Container(height: 100, width: 200), 
       new Container(height: 100, width: 200), 
       new Container(height: 100, width: 200), 
       new Container(height: 100, width: 200), 
       new Container(height: 100, width: 200), 
       new Container(height: 100, width: 200), 
       new Container(height: 100, width: 200), 
      ), 
     ] 
    ) 
} 
} 

Antwort

1

Das Streifen zeigt an, dass Sie überquellenden Inhalt haben, und es wird auch Fehler an der Konsole anmelden. Es ist am besten, diese Probleme zu beheben, indem Sie Flutter sagen, wie mit dem Überlauf umzugehen ist.

Sie können die Inhalte in einer wickeln Flexible oder Expanded (wenn Sie einen sind in Column oder) Flutter wissen zu lassen, dass es in Ordnung ist es zum Einsturz. Sie können auch eine (die Optionen für die Behandlung von Überlauf bietet) oder eine ListView (die blättern kann) verwenden. Wenn Sie ein Widget verwenden, gibt es mehrere Möglichkeiten, wie der Überlauf abgeschnitten werden soll.

In dem Beispiel, das Sie gepostet haben, denke ich, dass eine Kombination von Stack und Positioned tun wird, was Sie wollen. Sie müssen mindestens eine Nicht-Null-Eigenschaft von festlegen, um es zu einem "positionierten" Widget zu machen, das verhindert, dass es die Dimensionen des Stack ermittelt. Sie können das Überlaufverhalten mit der Eigenschaft overflow konfigurieren.

screenshot

import 'package:flutter/material.dart'; 

class OverflowExample extends StatelessWidget { 
    @override 
    Widget build(BuildContext context) { 
    return new Stack(
     overflow: Overflow.visible, 
     children: <Widget>[ 
     new Positioned(
      top: 0.0, 
      child: new Row(
      children: [ 
       new Column(
       children: [ 
        new Container(
        height: 100.0, width: 200.0, child: new Text('1')), 
        new Container(
        height: 100.0, width: 200.0, child: new Text('2')), 
        new Container(
        height: 100.0, width: 200.0, child: new Text('3')), 
        new Container(
        height: 100.0, width: 200.0, child: new Text('4')), 
        new Container(
        height: 100.0, width: 200.0, child: new Text('5')), 
        new Container(
        height: 100.0, width: 200.0, child: new Text('6')), 
        new Container(
        height: 100.0, width: 200.0, child: new Text('7')), 
        new Container(
        height: 100.0, width: 200.0, child: new Text('8')), 
       ], 
      ), 
       new Column(
       children: [ 
        new Container(
        height: 100.0, width: 200.0, child: new Text('1')), 
        new Container(
        height: 100.0, width: 200.0, child: new Text('2')), 
        new Container(
        height: 100.0, width: 200.0, child: new Text('3')), 
        new Container(
        height: 100.0, width: 200.0, child: new Text('4')), 
        new Container(
        height: 100.0, width: 200.0, child: new Text('5')), 
        new Container(
        height: 100.0, width: 200.0, child: new Text('6')), 
        new Container(
        height: 100.0, width: 200.0, child: new Text('7')), 
        new Container(
        height: 100.0, width: 200.0, child: new Text('8')), 
       ], 
      ), 
      ], 
     ), 
     ), 
     ], 
    ); 
    } 
} 

void main() { 
    ScrollController _scrollController = new ScrollController(
); 
    runApp(new MaterialApp(
    home: new Material(child: new OverflowExample()), 
)); 
} 
+0

Ja war mein Plan es absichtlich fließen zu lassen und Sie den Rest durch Geste Detektoren sehen können. – user3217522

+0

Können Sie ein Codebeispiel bereitstellen, ich zeige Ihnen, wie Sie es aktualisieren, um explizit Überlauf zu behandeln. –

+0

Ich postete ein Beispiel – user3217522