【问题标题】:Flutter: How to create Wrap widget - Overflow warningFlutter:如何创建 Wrap 小部件 - 溢出警告
【发布时间】:2020-07-22 17:07:54
【问题描述】:

我正在用 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

【问题讨论】:

标签: flutter dart widget containers row


【解决方案1】:

你必须像这样制作内部RowWrap,然后是外部RowColumnWrap

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

如果您需要更多,请告诉我

【讨论】:

    猜你喜欢
    • 2021-01-28
    • 2021-07-14
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-12-09
    • 2020-10-23
    • 1970-01-01
    • 2021-08-06
    相关资源
    最近更新 更多