Flutter - 列中扩展小部件内的文本溢出

Question

我想要实现的是在固定高度的列中有一个文本小部件。当文本很长时，我希望overflow设置为TextOverflow.ellipsis启动的属性。文本小部件将其maxLines属性设置为高值以允许其自动换行。但是该列中还有其他小部件，无论是在文本小部件之前还是之后。文本小部件位于扩展小部件中，因此它在列中占据尽可能多的空间。完整代码粘贴在下面。

此设置的问题在于文本溢出其容器父级。我在容器上有一个边框装饰，显示了这种情况。为什么会发生这种情况，我该如何解决。

import 'package:flutter/material.dart';

void main() {
  runApp(App());
}

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Overflow"),
        ),
        body: Center(
          child: Container(
              width: 200.0,
              height: 250.0,
              child: Card(
                  child: Column(children: <Widget>[
                Image.asset(
                  "assets/bereket.jpg",
                  width: double.infinity,
                  fit: BoxFit.cover,
                ),
                Expanded(
                    child: Container(
                        padding: EdgeInsets.all(8.0),
                        child: (Column(
                          children: [
                            Text(
                                "???? ????? «???? ?? ???? ???? ???????! ???? ???? ????»",
                                maxLines: 2,
                                style: Theme.of(context)
                                    .primaryTextTheme
                                    .subhead
                                    .copyWith(
                                      color: Colors.black,
                                    ),
                                overflow: TextOverflow.ellipsis),
                            Expanded(
                                child: Container(
                                    decoration: BoxDecoration(
                                      border: Border.all(
                                          color: Colors.green, width: 2.0),
                                    ),
                                    child: Text(
                                      """???? ??? ???? ???? ?????? ???? ???? ???? ??? ????? ?? ???? ???? ???? ????? ????? ??? ????? ?????? ??????

?? ???? ????? ???? ?????? ?? ????? ????? ?????? ?? ??? ?????? ???? ???????""",
                                      maxLines: 10,
                                      style: Theme.of(context)
                                          .primaryTextTheme
                                          .caption
                                          .copyWith(color: Colors.black),
                                      overflow: TextOverflow.ellipsis,
                                    ))),
                            Row(
                              crossAxisAlignment: CrossAxisAlignment.center,
                              children: <Widget>[
                                Container(
                                  width: 20.0,
                                  height: 20.0,
                                  child: Image.asset("assets/bbc.png"),
                                ),
                                SizedBox(width: 8.0),
                                Text('??? - ???? ??? ???',
                                    style: Theme.of(context)
                                        .textTheme
                                        .caption
                                        .copyWith(fontSize: 10.0))
                              ],
                            )
                          ],
                        ))))
              ]))),
        ),
      ),
    );
  }
}

Answer 1

尝试用“灵活”而不是可扩展来包装您的列。

我有同样的问题，文本在列中溢出，并用“灵活”包装列本身，允许使文本更小。

         Flexible(
          child: Padding(
            padding: const EdgeInsets.only(left: 8.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Padding(
                  padding: const EdgeInsets.only(bottom: 8.0),
                  child: Text(
                    'Name',
                    style: CustomTextStyle.blueTitle14(context),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.only(bottom: 4.0),
                  child: Text('Long text'),
                ),
              ],
            ),
          ),
        ),

Answer 2

根据我的经验，您应该Container按照这篇文章为包含溢出文本的内容分配固定宽度。颤动环绕文本。