Question

我希望在顶部有一个不可滚动的部分，如图像，例如在底部有一个标签栏，我可以滚动到顶部，让出现一个项目列表，并能够在列表内滚动项目。

为此，我使用了CustomScrollView，暂时使用了一个银色栅格代替了图像，还有一个用于标签栏的条子应用栏和一个用于列表的sliverFixedExtentList。

  Widget build(BuildContext context) {
return new Scaffold(
    body: new CustomScrollView(
      slivers: <Widget>[
        new SliverGrid(
          gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(
            childAspectRatio: 0.58,
            crossAxisCount: 1,

          ),
          delegate: new SliverChildBuilderDelegate(
                (BuildContext context, int index) {
              return new Container(

                  color: Colors.red,
                  child: new Container(
                    color: Colors.green,
                    child: new Text('IMG HERE'),
                  )
              );
            },
            childCount: 1,

          ),
        ),

        new SliverAppBar(
          title: new Text("title"),
          floating: false,
          pinned: true,
          primary: true,
          actions: <Widget>[
            new IconButton(
              icon: const Icon(Icons.arrow_upward),
              onPressed: () {
              },
            ),

          ],
          bottom: new TabBar(
            controller: _tabController,
            isScrollable: true,
            tabs: _bars,
          ),
        ),

        new SliverFixedExtentList(
          itemExtent: 100.0,
          delegate: new SliverChildBuilderDelegate(
                (BuildContext context, int index) {
              return new Container(
                alignment: Alignment.center,
                color: Colors.lightGreen[100 * (index % 9)],
                child: new Text('list item $index'),
              );
            },
          ),
        ),
      ],
    )
);

}

但我有3个问题：

我无法弄清楚如何在这里为条子制作不可滚动的条子。
我不知道如何在发布时将appBar准确放置在屏幕的底部。
当appbar到达列表顶部跳转一些项目时，列表有问题，似乎它代表了sliverGrid元素的大小。

由于

Answer 1

我已经尝试过您的代码，并且似乎那里缺少一些必不可少的部分。我看不到_tabController和_bars后面的代码，所以我只制作了自己的_tabController和_bars。我已经运行了，这是到目前为止我得到的：

启动时：

浏览直到AppBar到达顶部。

因此，出于演示目的，我对您的代码进行了一些更改：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage>
    with SingleTickerProviderStateMixin {
  TabController _tabController;
  List<Widget> _bars = [
    Tab(icon: Icon(Icons.image)),
    Tab(icon: Icon(Icons.image)),
  ];
  int _selectedIndex = 0;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: _bars.length, vsync: this);
    _tabController.addListener(() {
      setState(() {
        _selectedIndex = _tabController.index;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        body: new CustomScrollView(
      slivers: <Widget>[
        new SliverGrid(
          gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(
            childAspectRatio: .69,
            crossAxisCount: 1,
          ),
          delegate: new SliverChildBuilderDelegate(
            (BuildContext context, int index) {
              return SafeArea(
                child: new Container(
                  color: Colors.green,
                  child: new Text('IMG HERE'),
                ),
              );
            },
            childCount: 1,
          ),
        ),
        new SliverAppBar(
          title: new Text("title"),
          floating: false,
          pinned: true,
          primary: true,
          actions: <Widget>[
            new IconButton(
              icon: const Icon(Icons.arrow_upward),
              onPressed: () {},
            ),
          ],
          bottom: new TabBar(
            controller: _tabController,
            isScrollable: true,
            tabs: _bars,
          ),
        ),
        new SliverFixedExtentList(
          itemExtent: 100.0,
          delegate: new SliverChildBuilderDelegate(
            (BuildContext context, int index) {
              return new Container(
                alignment: Alignment.center,
                color: Colors.lightGreen[100 * (index % 9)],
                child: new Text('list item $index'),
              );
            },
          ),
        ),
      ],
    ));
  }
}

以下是输出：

如您所见，我一直在使用childAspectRatio的值，以便您可以默认在屏幕底部设置AppBar`，这就是我对问题编号2的理解。 >

对于第3个问题，您的代码似乎运行正常。我可以正确地看到从0开始的升序列表项。

对于第一个问题，我对您希望它如何发生感到困惑。您不希望SliverGrid可以滚动，但是您希望AppBar在滚动后位于屏幕顶部。我想在这部分上提供更多的背景信息可以使每个人都更加清楚。

Flutter如何使用不可滚动的部件构建CustomScrollView

1 个答案: