Flutter: как создать виджет Wrap - предупреждение о переполнении - PullRequest
Новая
       19

Flutter: как создать виджет Wrap - предупреждение о переполнении

0 голосов
/ 10 апреля 2020

Я создаю тест во флаттере и хочу создать виджет обтекания, потому что есть несколько длинных вопросов (текст), которые не помещаются в одну строку. Где я могу разместить свой виджет Wrap? Я попытался заменить каждый простой виджет Row на виджет Wrap, но ни один из них не работает. Также есть ссылка с инструкциями по использованию виджета 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

1 Ответ

0 голосов
/ 10 апреля 2020

Вы должны сделать внутреннее 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),
                    ),
                  ],
                ),
              ),
            ],
          ),

Дайте мне знать, если вам нужно больше, чем это

...