Flutter：如何創建 Wrap 小部件 - 溢出警告

Question

我正在 flutter 中創建一個測驗，並且我想創建一個 Wrap 小部件，因為有一些長問題（文本），它不適合一行。 我把 Wrap 小部件放在哪里了？ 我試圖用 Wrap 小部件替換每個簡單的 Row 小部件，但它們似乎都不起作用。 還有關於如何使用我遵循的 Wrap 小部件的說明的鏈接： https://medium.com/flutter-community/flutter-wrap-widget-e1ee0b005b16謝謝。這是我的代碼：

`

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

class questionpage extends StatefulWidget {
  @override
  _questionpageState createState() => _questionpageState();
}

class _questionpageState extends State<questionpage> {

  int qnum = 0;
  int score = 0;
  int seconds = 10;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.indigoAccent[700],
        title: SafeArea(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              Container(
                child: Text(
                  '$qnum/10        ',
                  style: TextStyle(
                    fontSize: 28,
                  ),
                ),
              ),
              Container(
                child: Text(
                  '$seconds',
                  style: TextStyle(
                    fontSize: 28,
                  ),
                ),
              ),
              Container(
                child: Text(
                  'Score: $score',
                  style: TextStyle(
                    fontSize: 28,
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
      body: Column(children: <Widget>[
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Container(
              margin: EdgeInsets.fromLTRB(0, 50, 0, 0),
              child: Text(
                'Question $qnum:',
                style: new TextStyle(
                  color: Colors.black,
                  fontSize: 32.0,
                  fontWeight: FontWeight.bold,
                  decoration: TextDecoration.underline,
                  decorationThickness: 3.0,
                ),
              ),
            ),
          ],
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Container(
              margin: EdgeInsets.fromLTRB(0, 5, 0, 0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Text(
                    'THIS IS THE LONGGGGGGGGGGG QUESTION',
                    style: new TextStyle(
                        color: Colors.black,
                        fontSize: 28.0,
                        fontWeight: FontWeight.bold
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ],),
    );
  }
}


  [1]: https://i.stack.imgur.com/U4Aut.png

Answer 1

您必須像這樣制作內部Row Wrap和外部Row Column或Wrap 。

Column(// this could be wrap too
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Container(
                margin: EdgeInsets.fromLTRB(0, 5, 0, 0),
                child: Wrap(
                  alignment: WrapAlignment.center,
                  children: <Widget>[
                    Text(
                      'THIS IS THE LONGGGGGGGGGGG QUESTION',
                      softWrap: true,
                      style: new TextStyle(
                          color: Colors.black,
                          fontSize: 28.0,
                          fontWeight: FontWeight.bold),
                    ),
                  ],
                ),
              ),
            ],
          ),

讓我知道您是否需要更多