flutter - 如何在Flutter中的SliverGrid/SliverList上转角半径

Question

可以将borderRadius转换为SliverList / SliverGrid吗？如果是，如何设置topRight和topLeft的半径

 CustomScrollView(
        slivers: <Widget>[
           SliverAppBar(
           ),
          ),
          SliverGrid(
            gridDelegate:
             SliverGridDelegateWithMaxCrossAxisExtent(
              maxCrossAxisExtent: 200.0,
              mainAxisSpacing: 10.0,
              crossAxisSpacing: 10.0,
              childAspectRatio: 4.0,
            ),
            delegate: SliverChildBuilderDelegate(
                  (BuildContext context, int index) {
                return Container(
                  color: Colors.teal[100 * (index % 9)],
                  alignment: Alignment.center,
                  child: Text('grid item $index'),
                );
              },
              childCount: 120,
            ),
          ),
        ],
      ),

Answer 1

您可能无法将 SliverList 舍入为四舍五入(甚至在某些情况下也是四舍五入的)，但是可以通过将列表的子级放在列中并将列包裹在容器中来进行调整设置容器的 borderRadius 。

而且滚动仍然可以完美地用作普通的 CustomScrollView

整个想法是使列用于 SliverList 。因此，您必须将 childCount 设置为1，并允许列处理有关子项的所有内容

您可以为SliverGrid尝试相同的操作

我用SliverList编写了一个示例

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: <Widget>[
          SliverAppBar(
            title: Text("Hey"),
          ),
          SliverList(
            delegate: SliverChildBuilderDelegate(
                (_, __){
                  return Container(
                    decoration: BoxDecoration(
                      color: Colors.orange,
                      borderRadius: BorderRadius.only(topLeft: Radius.circular(10), topRight: Radius.circular(10))
                    ),
                    child: Column(
                      children: List.generate(10, (index) => Container(child: ListTile(title: Text("$index nothing")))),
                    ),
                  );
                },
              childCount: 1
            ),
          )
        ],
      ),
    );
  }
}

我希望这可以帮助你