首页 > 解决方案 > Flutter Web:Sliver 布局

问题描述

我正在开发 Flutter Web。我正在使用 Sliver 进行以下布局。我在 SliverList 中收到 RenderBox 错误。如何使用 SliverLayoutBuilder 创建响应式布局?

如何在 Silver LayoutBuilder 中获得最大宽度?

银条布局 在此处输入图像描述

错误 在此处输入图像描述

示例代码

  Scaffold(
      key: smartPageScaffoldKey,
      resizeToAvoidBottomInset: false,
      backgroundColor: Colors.grey,     
      body: CustomScrollView(
        slivers: [          
          sliverAppBar(context, _smartPage),
          SliverToBoxAdapter(
              child: Align(
            alignment: Alignment.center,
            child: Container(
              width: _smartPage.pageWidth,
              padding: const EdgeInsets.only(top: 20.0, bottom: 10.0),
              child: Text('Size:900px'),
            ),
          )),
          
          SliverLayoutBuilder(
              builder: (BuildContext context, SliverConstraints constraints) {
            return SliverToBoxAdapter(
                child: Padding(
              padding: const EdgeInsets.only(left: 15.0, right: 15.0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
           
                children: [
                  Container(
                    width: 900,
                    child: DecoratedBox(
                      decoration: BoxDecoration(color: Colors.green),
                      child: SliverList(
                          delegate: SliverChildBuilderDelegate(
                                (BuildContext context, int index) {
                              return FadeInImage.memoryNetwork(
                                placeholder: kTransparentImage,
                                image: 'https://source.unsplash.com/category/fashion/900x600',
                                // width: MediaQuery.of(context).size.width,
                                fit: BoxFit.fill,

                              );
                            },
                            childCount: 5,
                          ),
                    ),
                  ),
                  ),
                  Spacer(),
                  IntrinsicHeight(
                    child: Container(
                      width: 200.0,
                      color: Colors.green,
                    ),
                  )
                ],
              ),
            ));
          }),
        
          SliverToBoxAdapter(child: SizedBox(height: 200.0)),
        ],
      ),
    );

标签: flutterweb

解决方案


推荐阅读