как повернуть радиус на SliverGrid / SliverList на флаттер - PullRequest
Новая
       17

как повернуть радиус на SliverGrid / SliverList на флаттер

0 голосов
/ 22 марта 2020

Можно ли от 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,
            ),
          ),
        ],
      ),

1 Ответ

0 голосов
/ 22 марта 2020

Вы, возможно, не сможете сделать SliverList округленным (даже в некоторой части), но вы можете настроить свой путь, поместив дочерние элементы списка в Столбец и оборачивая столбец в контейнер , затем устанавливая borderRadius контейнера .

И прокрутка по-прежнему работает отлично как обычно CustomScrollView

Вся идея состоит в том, чтобы Столбец работал для SliverList . Поэтому вам нужно установить childCount на 1 и разрешить Column обрабатывать все, что касается children

Вы можете попробовать то же самое для 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
            ),
          )
        ],
      ),
    );
  }
}

Надеюсь, это поможет вам

...