文本小部件softWrap在Flutter中的嵌套行-行中不起作用

Question

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

让softWrap在嵌套行列场景中工作变得越来越困难：（

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，则它将从屏幕上消失。

Answer 1

您正在小部件树中使用嵌套行。在那种情况下，用Expanded小部件包装小部件将不起作用，因为如果父元素是Row或Column小部件，则框架无法布局父元素的布局宽度。

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

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