如果文本较长，则颤动中断文本并扩展容器

Posted 2023-02-23

【中文标题】如果文本较长，则颤动中断文本并扩展容器

【英文标题】：Flutter break text and expand container if text is longer

【发布时间】：2021-10-13 05:20:57

【问题描述】：

我有一个Container，也有一个Text 作为child。问题是我的text 在右侧溢出。但实际上我希望它打破并且父容器应该展开。

这就是现在的样子：

还有我的代码：

  Widget build(BuildContext context) 
return GestureDetector(
  onTap: onTap,
  child: Padding(
    padding: EdgeInsets.only(
      bottom: 14.scaled,
    ),
    child: Container(
      // height: 70.scaled,
      decoration: BoxDecoration(
        boxShadow: [verySoftDarkShadow],
        color: white,
        borderRadius: BorderRadius.circular(10.scaled),
      ),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          SizedBox(
            width: 20.scaled,
          ),
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                shortArticle.label!,
                style: alternativeText,
              ),
              Text(
                shortArticle.manufacturerLabel ?? '',
                style: alternativeText.copyWith(color: darkGray),
              ),
            ],
          ),
          Spacer(),
          SvgIconButton(
            onTap: () 
              print('tapped');
            ,
            svgPath: 'images/vertical_menue_dots.svg',
            width: touchTargetSizeForIconButton,
            height: touchTargetSizeForIconButton,
            svgSize: 16.scaled,
          ),
        ],
      ),
    ),
  ),
);

我尝试将text-widget 包装在Expanded 中，但这只会使其溢出并且不显示任何内容。我在这里想念什么？我该如何解决这个问题？

如果您需要更多信息，请告诉我！

【问题讨论】：

在 Expanded 或 Flex Widget 中添加您的 Widget 参考我的回答 here

@RavindraS.Patil 我尝试将文本包装在 Expanded 中，但这并没有解决问题:(

尝试添加 SizedBox() 而不是 Spacer()

@RavindraS.Patil 结合 Kuku 的解决方案为我修复了它:) 你能解释一下为什么 SizedBox 可以工作，但 Spacer() 会引发一些奇怪的行为吗？

Spacer 占用任何可用空间，而 SizedBox 具有特定的宽度和高度

【参考方案1】：

在您的文本小部件中添加：

maxLines: null

【讨论】：

这给了我一个溢出

【参考方案2】：

只需用 Expanded 包裹 Column 小部件，并向 Text 小部件添加一个“溢出”参数。 （因为我不知道预定义的样式和资产，所以我改变了自己。）

请参阅下面基于您的代码的“buildWidget”函数。

import 'package:flutter/material.dart';

void main() 
  runApp(MyApp());


class MyApp extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  


class MyHomePage extends StatefulWidget 
  MyHomePage(Key key, this.title) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();


class _MyHomePageState extends State<MyHomePage> 
  @override
  void initState() 
    super.initState();
  

  @override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: _buildBody(),
      floatingActionButton: FloatingActionButton(
        onPressed: () ,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  

  Widget _buildBody() 
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 10, vertical: 20),
      child: Column(children: [
        buildWidget(),
        buildWidget(),
      ]),
    );
  


Widget buildWidget() 
  return GestureDetector(
    onTap: () ,
    child: Padding(
      padding: EdgeInsets.only(
        bottom: 14,
      ),
      child: Container(
        // height: 70.scaled,
        // decoration: BoxDecoration(
        //   boxShadow: [verySoftDarkShadow],
        //   color: white,
        //   borderRadius: BorderRadius.circular(10.scaled),
        // ),
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            SizedBox(
              width: 20,
            ),
            Expanded(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    'shortArticle.label!shortArticle.label!shortArticle.l!shortArticle.label!',
                    // overflow: TextOverflow.ellipsis,
                    style: TextStyle(fontSize: 13, fontWeight: FontWeight.bold),
                  ),
                  Text(
                    'asdfasdf',
                    style: TextStyle(fontSize: 11),
                  ),
                ],
              ),
            ),
            Icon(
              Icons.favorite,
              color: Colors.pink,
              size: 24.0,
              semanticLabel: 'Text to announce in accessibility modes',
            ),
          ],
        ),
      ),
    ),
  );

【讨论】：

我不想溢出。文本应该换行

如果是这样，您只需从 Text 小部件中删除 'overflow' 参数。

工作，还将 Spacer 更改为 SizedBox 修复了另一个奇怪的行为。现在正如预期的那样。谢谢:)