存在溢出时如何创建阅读更多可扩展边框

Question

我有一个包含一些文本的容器。容器被限制为屏幕大小的一半。有时有很多，这会导致文本溢出。在溢出的情况下，我希望容器是可扩展的。在溢出的情况下创建可扩展容器的最佳方法是什么？

代码如下：

Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: Text('Document Overview')),
    body: Container(
      constraints: BoxConstraints(
        minWidth: MediaQuery.of(context).size.width,
        minHeight: 100,
        maxHeight: MediaQuery.of(context).size.height / 2,
      ),
      padding: EdgeInsets.all(10),
      decoration: BoxDecoration(
        border: Border(bottom: BorderSide(color: Colors.black)),
      ),
      child: Column(
        children: [
          Expanded(
            child: Column(
              children: [
                Text('Some text', style: TextStyle(fontSize: 24)),
                SizedBox(height: 16),
                Text(
                  'Some more text',
                  style: TextStyle(fontSize: 16),
                  overflow: TextOverflow.fade,
                )
              ],
            ),
          )
        ],
      ),
    ),
  );
}

Answer 1

设置 minHeight: MediaQuery.of(context).size.height / 2 并删除 maxHeight: ...。

在两个Column中设置mainAxisSize: MainAxisSize.min。

使用 Flexible 代替 Expanded。

这可能有帮助，

Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: Text('Document Overview')),
    body: Container(
      constraints: BoxConstraints(
        minWidth: MediaQuery.of(context).size.width,
        minHeight: MediaQuery.of(context).size.height / 2,
      ),
      padding: EdgeInsets.all(10),
      decoration: BoxDecoration(
        border: Border(bottom: BorderSide(color: Colors.black)),
      ),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Flexible(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                Text('Some text', style: TextStyle(fontSize: 24)),
                SizedBox(height: 16),
                Text(
                  '${List.generate(70, (_) => "Some more text ").join()}',
                  style: TextStyle(fontSize: 16),
                  overflow: TextOverflow.fade,
                )
              ],
            ),
          )
        ],
      ),
    ),
  );
}

存在溢出时如何创建阅读更多可扩展边框

How to create read more expandable border when overflow exists

expandable

flutter

flutter-layout