允许小部件溢出答案

【问题标题】：Allow widget to overflow允许小部件溢出
【发布时间】：2020-02-17 06:37:35
【问题描述】：

我想创建自己的安全区域视图，但不是仅仅切断溢出区域，而是希望溢出区域被半透明背景阻挡。

我意识到这个问题有点类似于Allowing a widget to overflow to another widget，但那里的答案可以特别解决这个问题，但不是我的。

那么如何让flutter widget溢出呢？

当存在顶部溢出时，我使用堆栈将容器放置在视图上方，如果存在底部溢出，则将容器放置在下方。结果效果很好，只是它溢出到半透明背景。

import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Didian',
      home: Scaffold(
        body: OpacitySafeArea(
          child: RandomWords()
        ),
      ),
    );
  }
}

class OpacitySafeArea extends StatelessWidget {
  final Widget child;
  OpacitySafeArea({
    @required this.child
  });

  @override
  Widget build(BuildContext context) {
    var deviceData = MediaQuery.of(context);
    var height = deviceData.size.height;
    var width = deviceData.size.width;
    var top = deviceData.padding.top;
    var bottom = deviceData.padding.bottom;
    print(deviceData);
    return Stack(
      overflow: Overflow.visible,
      children: <Widget>[
        this.child,
        top > 0? Container(
          color: Color.fromRGBO(255, 255, 255, 0.9),
          height: top,
          width: width
        ):null,
        bottom > 0? Positioned(
          bottom: 0,
          child: Container(
            color: Color.fromRGBO(255, 255, 255, 0.9),
            height: bottom,
            width: width
          )
        ):null
      ].where((child) => child != null).toList()
    );
  }
}

class RandomWordsState extends State<RandomWords> {
  final _suggestions = <WordPair>[];

  Widget buildSuggestions() {
    return ListView.separated(
      padding: EdgeInsets.all(16),
      itemCount: 100,
      itemBuilder: (context, index) {
        if(index >= _suggestions.length) {
          _suggestions.add(WordPair.random());
        }
        return ListTile(
          title: Text(
            _suggestions[index].asPascalCase,
            style: TextStyle(fontSize: 18)
          )
        );
      },
      separatorBuilder: (context, index) => Divider(),
    );
  }

  @override
  Widget build(BuildContext context) {
    return buildSuggestions();
  }
}

class RandomWords extends StatefulWidget {
  @override
  RandomWordsState createState() => RandomWordsState();
}

【问题讨论】：

溢出是 Flutter 中的反模式。别。相反，只需删除该 SafeArea，这将允许列表显示顶部/底部后面的内容。
如果没有 SafeArea，设备状态栏和菜单栏会干扰内容，或者内容会在没有适当过渡的情况下消失。否则我需要放置阴影或边框来指示安全区域，但这是一种样式偏好。

标签： flutter

【解决方案1】：

我一直在寻找相同的，最后使用了一个简单的解决方案而不使用SafeArea()：

只需对 ListView 本身应用一个填充，您可以使用 MediaQuery.of(context).viewPadding.bottom 获得它

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.builder(
        padding: EdgeInsets.all(0).copyWith(bottom: MediaQuery.of(context).viewPadding.bottom),
        itemCount: 2000,
        itemBuilder: (BuildContext context, int index) {
            return Text("Item: $index");
        },
      ),
    );
  }

【讨论】：