文本小部件softWrap在Flutter中的嵌套行-行中不起作用 [英] Text widget softWrap not working in nested row-column-row in Flutter

问题描述

我正在尝试在打击代码中将文本"很棒的很长的文本包裹起来，理想情况下应该柔和地弯曲".使用 Flexible 和 Expanded 尝试过，无效.

I am trying to wrap the text 'Awesome somthing very long text which should ideally soft warp' in the blow code. Tried using Flexible and Expanded, did not work.

在嵌套行列方案中使 softWrap 变得越来越困难:(

It's getting tough to have softWrap working in nested row column scenarios :(

import 'package:flutter/material.dart';
import 'package:sample/models/Reward.dart';

class RewardDetailsView extends StatelessWidget {
  final Reward _reward;

  RewardDetailsView(this._reward);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        elevation: 0,
      ),
      body: Container(
        child: SingleChildScrollView(
          padding: EdgeInsets.all(16.0),
          child: Column(
            children: <Widget>[
              Row(

                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Icon(Icons.wallpaper),
                  SizedBox(width: 16.0),
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[

                      Text(
                        'Benefits',
                        style: TextStyle(
                          fontSize: 14.0,
                          fontWeight: FontWeight.w600,
                          color: Colors.grey[600],
                        ),
                      ),

                      Row(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: <Widget>[
                          Padding(
                            padding: const EdgeInsets.only(top: 4.0),
                            child: Icon(
                              Icons.arrow_right,
                              size: 10.0,
                            ),
                          ),
                          SizedBox(width: 8.0),
                          Text(
                            'Awesome somthing very long text which should ideally soft warp',
                            softWrap: true,
                          ),
                        ],
                      ),

                      Row(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: <Widget>[
                          Padding(
                            padding: const EdgeInsets.only(top: 4.0),
                            child: Icon(
                              Icons.arrow_right,
                              size: 10.0,
                            ),
                          ),
                          SizedBox(width: 8.0),
                          Text(
                            'Awesome somthing very long text which should ideally soft warp',
                            softWrap: true,
                          ),
                        ],
                      ),

                    ],
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

下面是代码的输出.如果我在 Text 小部件周围添加了Flexible，则它将从屏幕上消失.

Below is the output of the code. If I add Flexible around the Text widget, it disappears from the screen.

推荐答案

您正在窗口小部件树中使用嵌套行.在那种情况下，用 Expanded 小部件包装小部件将不起作用，因为如果父元素为 Row 或 Column 小部件.

You're using nested rows in your widget tree. In that case by wrapping a widget with Expanded widget won't work, because the framework cant layout width for the parent element if it is either Row or Column widget.

这是基于您的示例的工作代码示例.

here is a working code sample based on your example.

  class RewardDetailsView extends StatelessWidget {
  final dynamic _reward = 'asdfasdfsd';
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        elevation: 0,
      ),
      body: Container(
        child: SingleChildScrollView(
          padding: EdgeInsets.all(16.0),
          child: Column(
            children: <Widget>[
              Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Icon(Icons.wallpaper),
                  SizedBox(width: 16.0),
                  Expanded(  // Wrap this column inside an expanded widget so that framework allocates max width for this column inside this row
                      child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      Text(
                        'Benefits',
                        style: TextStyle(
                          fontSize: 14.0,
                          fontWeight: FontWeight.w600,
                          color: Colors.grey[600],
                        ),
                      ),
                      Row(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: <Widget>[
                          Padding(
                            padding: const EdgeInsets.only(top: 4.0),
                            child: Icon(
                              Icons.arrow_right,
                              size: 10.0,
                            ),
                          ),
                          SizedBox(width: 8.0),
                          Expanded( // Then wrap your text widget with expanded
                              child: Text(
                                'Awesome somthing very long text which should ideally soft warp lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorm ipsum',
                                softWrap: true,
                              )),
                        ],
                      ),
                      Row(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: <Widget>[
                          Padding(
                            padding: const EdgeInsets.only(top: 4.0),
                            child: Icon(
                              Icons.arrow_right,
                              size: 10.0,
                            ),
                          ),
                          SizedBox(width: 8.0),
                          Text(
                            'Awesome somthing very long text which should ideally soft warp',
                            softWrap: true,
                          ),
                        ],
                      ),
                    ],
                  )),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

这篇关于文本小部件softWrap在Flutter中的嵌套行-行中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！