我在我的项目中使用SliverAppBarSliverListView
我需要BorderRadiusSliverList底部即将出现的SliverAppBar中。
这是我需要的屏幕截图:
flutter - 如何将BorderRadius授予SliverList-LMLPHP
这是我的代码:

Scaffold(
    body: CustomScrollView(
      slivers: <Widget>[
        SliverAppBar(
            backgroundColor: Colors.transparent,
            brightness: Brightness.dark,
            actions: <Widget>[
              IconButton(icon: Icon(Icons.favorite), onPressed: () {}),
              IconButton(icon: Icon(Icons.share), onPressed: () {})
            ],
            floating: false,
            pinned: false,
            //title: Text("Flexible space title"),
            expandedHeight: getHeight(context) - MediaQuery.of(context).padding.top,
            flexibleSpace: Container(
              height: double.infinity,
              width: double.infinity,
              decoration: BoxDecoration(
                image: DecorationImage(
                  fit: BoxFit.cover,
                  image: AssetImage("assets/images/Rectangle-image.png")
                )
              ),
            ),
            bottom: _bottomWidget(context),
          ),
           SliverList(
            delegate: SliverChildListDelegate(listview),
          ),
      ],
    ),
  )
因此,有了这段代码,UI就会像这样...
flutter - 如何将BorderRadius授予SliverList-LMLPHP
可以建议我可以采用的任何其他方法来实现这种设计...

最佳答案

我使用SliverToBoxAdapter这样的代码实现了此设计。

flutter - 如何将BorderRadius授予SliverList-LMLPHP

final sliver = CustomScrollView(
  slivers: <Widget>[
    SliverAppBar(),
    SliverToBoxAdapter(
      child: Container(
        color: Color(0xff5c63f1),
        height: 20,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.end,
          children: <Widget>[
            Container(
              height: 20,
              decoration: BoxDecoration(
                color: Colors.white,
                  borderRadius: BorderRadius.only(
                    topLeft: const Radius.circular(20.0),
                    topRight: const Radius.circular(20.0),
                  ),
              ),
            ),
          ],
        ),
      ),
    ),
    SliverList(),
  ],
);

我在SliverToBoxAdapter中使用了2个容器。

SliverToBoxAdapter在Sliver Appbar和Sliver List之间。
  • 首先,我为拐角边缘创建一个蓝色(应为Appbar颜色)容器。
  • 然后我创建一个高度相同的白色容器,并在蓝色容器内部创建带有边框半径的 ListView 。

  • Preview on dartpad

    关于flutter - 如何将BorderRadius授予SliverList,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/58570208/

    10-10 05:18