Question

有人在Flutter中碰到过Android中的fadingEdgeLength之类的东西，以便当您向上滚动项目时，它们会逐渐淡入屏幕顶部吗？

下面是我的窗口小部件构建的界面。

如果有帮助，这些是我指的属性：

android：fadingEdgeLength =“ 10dp”

android：requiresFadingEdge =“ horizontal”>

@override
Widget build(BuildContext context) {
return Scaffold(
  appBar: AppBar(
    title: Text('CMS Users'),
  ),
  body: ListView.builder(
      padding: EdgeInsets.only(top: 20.0, left: 4.0),
      itemExtent: 70.0,
      itemCount: data == null ? 0 : data.length,
      itemBuilder: (BuildContext context, int index) {
        return Card(
          elevation: 10.0,
          child: InkWell(
            onTap: () {
              Navigator.push(
                  context,
                  new MaterialPageRoute(
                    builder: (BuildContext context) =>
                        new PeopleDetails("Profile Page", profiles[index]),
                  ));
            },
            child: ListTile(
              leading: CircleAvatar(
                child: Text(profiles[index].getInitials()),
                backgroundColor: Colors.deepPurple,
                radius: 30.0,
              ),
              title: Text(
                  data[index]["firstname"] + "." + data[index]["lastname"]),
              subtitle: Text(
                  data[index]["email"] + "\n" + data[index]["phonenumber"]),
            ),
          ),
        );
      }),
   );
 }
}

Answer 1

您可以在ShaderMask之上应用ListView并使用BlendMode来获得想要的东西。

Widget animationsList() {
    return Expanded(
      child: ShaderMask(
        shaderCallback: (Rect bounds) {
            return LinearGradient(
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
              colors: <Color>[Colors.transparent,Colors.red],
            ).createShader(bounds);
        },
        child: Container(height: 200.0, width: 200.0, color: Colors.blue,),
        blendMode: BlendMode.dstATop,
     ),
);

Answer 2

就像其他人提到的那样，您可以将ListView放在ShaderMask下，但是通过少量的额外参数化，您可以获得更好的结果-至少如果您想实现我想要的。

（可选）您可以设置LinearGradient的[stops]列表：

[stops]列表（如果指定）必须与[colors]相同。

它为每种颜色指定矢量从零到零的分数。介于0.0和1.0之间。

加：有混合模式，其中忽略源的颜色通道，只有不透明才起作用。 BlendMode.dstOut在下面的示例中也是如此。如您在屏幕快照中所见，未使用紫色，仅用于矢量的一部分。

您可以使用不同的[blendMode]设置进行操作，其中有很多。

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        body: FadingListViewWidget(),
      ),
    ),
  );
}

class FadingListViewWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        height: 320,
        child: ShaderMask(
          shaderCallback: (Rect rect) {
            return LinearGradient(
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
              colors: [Colors.purple, Colors.transparent, Colors.transparent, Colors.purple],
              stops: [0.0, 0.1, 0.9, 1.0], // 10% purple, 80% transparent, 10% purple
            ).createShader(rect);
          },
          blendMode: BlendMode.dstOut,
          child: ListView.builder(
            itemCount: 100,
            itemBuilder: (BuildContext context, int index) {
              return Card(
                color: Colors.orangeAccent,
                child: ListTile(
                  title: Text('test test test test test test'),
                ),
              );
            },
          ),
        ),
      ),
    );
  }
}

Answer 3

尝试使用


tell application "System Events" to tell process "Spotify"
    tell menu bar item 2 of menu bar 0
        click
        click menu item "Private Session" of menu 1
    end tell
end tell

Answer 4

我有类似的要求，所以我为此任务创建了一个库。您可以在这里找到它：fading_edge_scrollview

要使用它，您需要向ScrollController中添加ListView，然后将此ListView作为子元素传递给FadingEdgeScrollView.fromScrollView构造函数

Answer 5

将Listview与Stack包裹在一起，将Listview添加为第一个子项，第二个为具有LinearGradient的Positioned Container。来自我的代码的示例：

堆栈：

return Stack(
                    children: <Widget>[
                      ListView(
                        scrollDirection: Axis.horizontal,
                        children: _myListOrderByDate,
                      ),
                      FadeEndListview(),
                    ],
                  );

覆盖类：

class FadeEndListview extends StatelessWidget {
  const FadeEndListview({
    Key key,
  }) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Positioned(
      right: 0,
      width: 8.0,
      height: kYoutubeThumbnailsHeight,
      child: Container(
        decoration: BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.centerRight,
            end: Alignment.centerLeft,
            stops: [0.0, 1.0],
            colors: [
                Theme.of(context).scaffoldBackgroundColor,
                Theme.of(context).scaffoldBackgroundColor.withOpacity(0.0),
            ],
          ),
        ),
      ),
    );
  }
}

它看起来像这样：

衰落边缘ListView-颤振

5 个答案: