如何删除或调整flutter_bootstrap组件列与列之间的间距
问题描述
在Flutter项目中使用flutter_bootstrap开发时,同一BootstrapRow下的多个BootstrapCol之间出现默认间距,需要删除或缩小该间距,当前实现效果如下:
当前使用的代码:
BootstrapContainer( fluid: true, padding: EdgeInsets.only( top: 10.0 ), children: [ BootstrapRow( height: 160, children: <BootstrapCol>[ BootstrapCol( fit: FlexFit.tight, sizes: 'col-6', child: Container( color: PRIMARY_BACKGROUND_CONTAINER_COLOR, child: Text("some text") ), ), BootstrapCol( sizes: 'col-6', child: Container( color: PRIMARY_BACKGROUND_CONTAINER_COLOR, child: Text("some text") ), ), ], ), ], )
flutter_bootstrap默认遵循Bootstrap的栅格规范,会给列添加水平padding(称为gutter)来实现默认的列间距效果,按以下方案调整即可
解决方案
- 方案1:单组列局部去除/缩小间距
直接给对应BootstrapCol组件设置padding参数,要完全去掉就设为EdgeInsets.zero,要缩小就自定义水平padding数值即可。修改后代码如下:
BootstrapContainer( fluid: true, padding: const EdgeInsets.only(top: 10.0), children: [ BootstrapRow( height: 160, children: <BootstrapCol>[ BootstrapCol( fit: FlexFit.tight, sizes: 'col-6', // 新增padding设置,完全去除间距 padding: EdgeInsets.zero, child: Container( color: PRIMARY_BACKGROUND_CONTAINER_COLOR, child: const Text("some text") ), ), BootstrapCol( sizes: 'col-6', // 同步设置padding padding: EdgeInsets.zero, child: Container( color: PRIMARY_BACKGROUND_CONTAINER_COLOR, child: const Text("some text") ), ), ], ), ], )
- 方案2:全局修改所有列的默认间距
如果需要全局调整所有BootstrapCol的默认间距,在项目入口初始化时修改flutter_bootstrap的全局配置即可,示例代码如下:
void main() { FlutterBootstrap().setSettings( // 自定义全局gutter值,默认是16,设为0即可完全去掉列间距,设为更小的数值就缩小间距 gutter: 0, ); runApp(const MyApp()); }
内容的提问来源于stack exchange,提问作者GNassro
相关产品推荐
相关产品推荐

