Question

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

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

那我该如何使flutter小部件溢出？

当发生顶部溢出时，我使用堆栈将容器放置在视图上方，如果发生底部溢出，则使用堆栈将容器放置在视图下方。除了溢出到半透明背景之外，结果效果很好。

screenshot

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();
}

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

允许小部件溢出

1 个答案: