标签: flutter-sliver

我有一个带有背景图像的 SliverAppBar。

折叠时，它以蓝色为背景：

但是我希望它在折叠时显示背景图像而不是蓝色：

我怎样才能做到这一点？

我已经尝试为应用栏设置透明背景色，但没有奏效。

代码：

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  var scrollController = ScrollController();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: Home());
  }
}

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: DefaultTabController(
          length: 2,
          child: NestedScrollView(
            headerSliverBuilder:
                (BuildContext context, bool innerBoxIsScrolled) {
              return [
                SliverAppBar(
                  expandedHeight: 200.0,
                  floating: …

如何在 FLUTTER 中创建带有可滚动工具栏的网格视图。我找到了带有标题ListViewWithHeader的列表视图。但是我需要像下面提到的图像中那样带有标题的 GridView。我使用 SilverGrid ignorer 来构建这个布局，这有点滞后。所以我需要另一种选择。

Container setDataToContainer() {
  return Container(
    color: Colors.white,
    margin: EdgeInsets.only(left: 4.0, right: 4, bottom: 4, top: 4),
    child: CustomScrollView(
      slivers: <Widget>[
        SliverList(
          delegate: SliverChildListDelegate(
            [
              HeaderWidget("Header 1"),
            ],
          ),
        ),
        SliverGrid(
          gridDelegate:
              SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
          delegate: SliverChildListDelegate(
            [
              BodyWidget("title", "key_x", "pnl.svg"),
              BodyWidget("title2", "key_x", "cls.svg"),
              BodyWidget(
                  "title3", "key_x", "irr.svg"),
              BodyWidget(
                  "title4", "key_x", "icp.svg"),
            ],
          ),
        ),
        SliverList(
          delegate: SliverChildListDelegate(
            [
              HeaderWidget("Header 2"),
            ],
          ),
        ),
        SliverGrid(
          gridDelegate:
              SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
          delegate: SliverChildListDelegate(
            [
              BodyWidget("title5", "key_x", …

我想在 中使用动画切换状态CustomScrollView，但它会引发错误。

class SliverAnimatedSwitcher extends StatefulWidget {
  final state;

  const SliverAnimatedSwitcher({Key key, this.state}) : super(key: key);

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

class _SliverAnimatedSwitcherState extends State<SliverAnimatedSwitcher> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: <Widget>[
          SliverAppBar(
            title: Text('SliverAnimatedSwitcher'),
          ),
          _buildContent(),
        ],
      ),
    );
  }

  get state => widget.state;

  Widget _buildContent() {
    var content;
    if (state.isNotEmpty == true) {
      content = SliverList(
        delegate: SliverChildBuilderDelegate(
          (context, index) {
            var item = state.items[index];
            return ListTile(
              title: Text(item.title),
            ); …

这是我的折叠工具栏的构建方法：-

     @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: CustomScrollView(
        controller: controller,
        slivers: <Widget>[
          SliverAppBar(
            pinned: true,
            expandedHeight: appBarHeight,
            leading: IconButton(
              icon: Icon(
                Icons.arrow_back_ios,
                color: Colors.black,
              ),
              onPressed: () => null,
            ),
            floating: true,
            flexibleSpace: FlexibleSpaceBar(

          titlePadding: EdgeInsets.only(left:leftV , bottom:bottomV ),
          title: Text(
            "Title ",
            style: TextStyle(
              color: Colors.black,
              fontSize: 16.0,
            ),
          ),
        ),
      ),
      SliverList(delegate:
          SliverChildBuilderDelegate((BuildContext context, int index) {
        return ListTile(title: Text("Flutter / $index"));
      }))
    ],
  ),
);
}

根据文档，我得到了删除填充的解决方案：-

EdgeInsetsDirectional.only(start: 72, bottom: 16)/// 默认情况下，如果标题 /// 不居中，则此属性的值为 …

开发了一个带有顶部和底部搜索栏的颤动页面，我们有水平列表视图，然后是垂直列表视图......当我点击搜索栏文本字段时，我的下方视图会自动滚动到顶部位置。

当我调试它时，构建方法再次调用，如何解决问题？

这与本示例https://github.com/lohanidamodar/flutter_ui_challenges 中发生的问题相同，这 是我从中获取的参考。

src\pages\hotel\hhome.dart是页面

这是我的代码，你觉得这段代码太大了，请看github示例代码（src\pages\hotel\hhome.dart）有同样的问题

class _HomeScreenState extends State<HomeScreen> {
@override
Widget build(BuildContext context) {
return CustomScrollView(
  slivers: <Widget>[
    _buildSliverAppBar(),
    _buildTitle('Category'),
    _buildSliverCategoryList(),
    _buildSliverPopularProducts(),
    _buildTitle('Top Distributors'),
    _buildSliverTopDistributorsList(),
    _buildSliverClothing(),
    _buildSliverElectronics(),
    _buildSliverHealthAndBeauty(),
  ],
);
}

 //Appbar: with "search" & "filter"
Widget _buildSliverAppBar() {
return SliverAppBar(
  leading: Icon(null),
  backgroundColor: colorPrimary,
  elevation: 10.0,
  forceElevated: true,
  pinned: true,
  flexibleSpace: ListView(
    children: <Widget>[
      Padding(
        padding: const EdgeInsets.only(left: 16.0, right: 16.0),
        child: Row(
          children: <Widget>[
            Expanded(
              child: Container(
                margin: EdgeInsets.only(right: 8.0),
                alignment: …

我想用水平分页滚动呈现卡片，并且每次都能看到上一张和下一张卡片的边框。flutter PageView 小部件几乎产生了我想要的结果，但它没有按照我想要的方式显示页面，这是我的代码

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: 'PageView Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'PageView Alignment'),
    );
  }
}

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

  final String title;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(title)),
      body: PageView.builder(
        itemCount: 5,
        itemBuilder: (context, i) => Container(
              color: …

扑文档显示演示为SliverAppBar+ TabBar+ TabBarView with ListView的使用NestedScrollView，这是一个有点复杂，所以我不知道是否有一个简单而明确的方式来实现它。我尝试了这个：

CustomScrollView
  slivers:
    SliverAPPBar
      bottom: TabBar
    TabBarView
      children: MyWidget(list or plain widget)

出现错误：

扑：下列说法被扔建筑滚动（axisDirection：对，物理：
扑：一个RenderViewport预计类型RenderSliv​​er的孩子，但收到类型_RenderExcludableScrollSemantics的孩子。
扑：RenderObjects期望特定类型的孩子，因为他们与布局过程中他们的孩子协调例如，RenderSliv​​er不能是RenderBox的子级，因为RenderSliv​​er不了解RenderBox布局协议。

和

flutter：引发了另一个异常：'package：flutter / src / widgets / framework.dart'：失败的断言：3497行pos 14：'owner._debugCurrentBuildTarget == this'：不正确。

这是我的代码：

import 'package:flutter/material.dart';

main(List<String> args) {
  runApp(MyScrollTabListApp());
}

class MyScrollTabListApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(title: "aa", home: MyScrollTabListHomePage());
  }
}

class MyScrollTabListHomePage extends StatefulWidget {
  @override
  MyScrollTabListHomePageState createState() {
    return new MyScrollTabListHomePageState();
  }
}

class MyScrollTabListHomePageState …

我正在尝试创建一个具有WebView的屏幕（来自webview_flutter：^ 0.3.5 + 3），AppBar并且我想在用户滚动时在屏幕外滚动。

我偶然发现了该指南，并尝试实现类似但没有骰子的方法。
是否可以WebView在CustomScrollViewwith 中使用，Slivers还是尚不支持？

我可以滚动应用栏来工作，如果我在创建常规小工具SliverChildListDelegate（我试过Row，Text，Container等），但没有运气了WebView。

@override
Widget build(BuildContext context) {
  return Scaffold(
      body: CustomScrollView(
        slivers: <Widget>[
          SliverAppBar(
            title: const Text("Heading"),
            floating: true,
          ),
          SliverList(
            delegate: SliverChildListDelegate([
              Container(
                child: WebView(
                  initialUrl: url,
                  javascriptMode: JavascriptMode.unrestricted,
                ),
              )
            ]
            ),
          )
        ],
      )
  );
}

欢迎任何指针/建议/ RTFM。

编辑赏金

jordan-davies提供的解决方案有效，但是非常不稳定。每当将SliverAppBar滚动离开时，都会WebView尝试自行调整大小以填充剩余的视口。这使得波动非常缓慢。

@override
Widget build(BuildContext context) { …

我正在尝试使用顶部的应用程序栏和下面的标签栏创建一个应用程序。向下滚动时，应通过移出屏幕来隐藏该栏（但应保留选项卡），而向上滚动时，应再次显示该应用程序栏。可以在WhatsApp中看到此行为。请观看此视频进行演示。（摘自Material.io）。这是一个类似的行为，虽然应用程序栏和标签栏被隐藏在滚动，所以它不完全是我要找的行为。

我已经能够实现自动隐藏，但是存在一些问题：

1. 我必须设置snap的SliverAppBar到true。没有此功能，当我向上滚动时，应用程序栏将不会显示。

   尽管这是可行的，但这不是我想要的行为。我希望应用程序栏显示流畅（类似于WhatsApp），而不是即使滚动很少也不会显示。

2. 当我向下滚动并更改选项卡时，部分内容会被遮挡掉。

   以下是显示行为的GIF：

   

   （当我在listView（tab1）上向下滚动，然后移回tab2时，请参阅该部分）

这是代码DefaultTabController：

DefaultTabController(
  length: 2,
  child: new Scaffold(
    body: new NestedScrollView(
      headerSliverBuilder:
          (BuildContext context, bool innerBoxIsScrolled) {
        return <Widget>[
          new SliverAppBar(
            title: Text("Application"),
            floating: true,
            pinned: true,
            snap: true,    // <--- this is required if I want the application bar to show when I scroll up
            bottom: new TabBar(
              tabs: [ ... ],    // <-- total of 2 tabs
            ), …

我在我的项目中使用SliverAppBar和SliverListView。

我需要BorderRadius我的SliverList那是我的SliverAppBar.

这是我需要的屏幕截图：

这是我的代码：

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),
          ),
      ],
    ),
  )

所以，有了这段代码，用户界面就像这样......

可以建议我可以采取的任何其他方法来实现这种设计......