Question

我正在Flutter上开发一个应用程序，并且希望对SliverAppBar进行以下设计，并在应用程序的底部添加圆角。使用棉条时该怎么办？

我在Dribbble的YouTuber上找到了设计，该人创建了该应用程序作为教程，但没有使用带有Slivers的PageView。

这是我使用的代码的简化版本：

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: PageView(
          children: [
            CustomScrollView(
              slivers: <Widget>[
                SliverAppBar(
                  backgroundColor: Colors.red,
                  expandedHeight: 250.0,
                ),
                SliverList(
                    delegate: SliverChildBuilderDelegate(
                  (BuildContext context, int index) {
                    return Card(
                      child: ListTile(
                        title: Text('something'),
                      ),
                    );
                  },
                  childCount: 10,
                ))
              ],
            ),
          ],
        ),
      ),
    );
  }
}

Answer 1

像这样使用 SliverPadding ：

   DefaultTabController(
    child:NestedScrollView(
    headerSliverBuilder:
       (BuildContext context, bool innerBoxIsScrolled) {
   return [
        SliverPadding(
            padding: new EdgeInsets.only(top: 5.0),
            sliver: new SliverList(
            delegate: new SliverChildListDelegate(
            [YOR_WIDGET()]),
            ),
        );
    ]

Flutter中具有Customscrolview和SliverList / SliverAppBar的圆角

1 个答案: