【问题标题】:Change border radius only for inner edges of grids (SliverGridDelegateWithMaxCrossAxisExtent)仅更改网格内边缘的边框半径 (SliverGridDelegateWithMaxCrossAxisExtent)
【发布时间】:2020-08-14 07:22:05
【问题描述】:

仅内部网格的边缘需要圆角。在下图中,圆角仅用于

  1. BBC 新闻 ->(上+下)右
  2. ABC 新闻 ->(上+下)左

如果多于两列,则第二列项目的左右两边都应该是圆角


child: Container(
        alignment: Alignment.bottomCenter,
        padding: EdgeInsets.fromLTRB(10, 0, 10, 10),
        decoration: BoxDecoration(
          color: Colors.black,
          borderRadius: BorderRadius.only(
            topRight: const Radius.circular(8.0),
            bottomRight: const Radius.circular(8.0),
          ),
          image: DecorationImage(
            image: CachedNetworkImageProvider(station.image, scale: 1.0),
            colorFilter: ColorFilter.mode(
                Colors.white.withOpacity(0.3), BlendMode.dstATop),
            fit: BoxFit.fitWidth,
          ),
        ),
        child: Text(
          ""
        ),
      ),

【问题讨论】:

    标签: flutter flutter-sliver sliver-grid


    【解决方案1】:

    一种方法是根据索引和列数生成BorderRadius

    例如:

    BorderRadius _generateBorderRadius(final int index, final int columnCount) {
        if (index % columnCount == 1) {
          return BorderRadius.only(
                topRight: const Radius.circular(8.0),
                bottomRight: const Radius.circular(8.0),
              );
       } else if (index % columnCount == 0) {
          return BorderRadius.only(
                topLeft: const Radius.circular(8.0),
                bottomLeft: const Radius.circular(8.0),
              );
       } else {
           return BorderRadius.all(const Radius.circular(8.0));
       }
    }
    

    希望这会有所帮助。

    编码愉快!

    【讨论】:

    • 如何为SliverGridDelegateWithMaxCrossAxisExtent获取columnCount
    • 在这种情况下,您必须计算孩子的数量。您可以根据屏幕宽度和maxCrossAxisExtent 进行计算
    • 这没有帮助
    猜你喜欢
    • 2016-11-21
    • 1970-01-01
    • 2021-11-17
    • 2022-01-15
    • 1970-01-01
    • 1970-01-01
    • 2014-09-06
    • 1970-01-01
    • 2021-08-09
    相关资源
    最近更新 更多