in my app I've a reorderable grid with some Container with rouded corner.
My problem is that while I'm changing the position of a container on the grid I can see a colored corner.
我知道这要归功于scaffold的BackmentColor属性.
我该如何处理？
这是我的代码:
ReorderableGridView.count(
padding: const EdgeInsets.all(16),
crossAxisSpacing: 4,
mainAxisSpacing: 4,
crossAxisCount: 2,
childAspectRatio: 1,
children: homeButtons
.map((index) => Container(
key: ValueKey(index),
alignment: Alignment.center,
width: double.infinity,
decoration: BoxDecoration(
gradient: const LinearGradient(
colors: [
Color(0xFF4D4D64),
Color(0xFF363649)
],
stops: [0, 1],
begin: AlignmentDirectional(1, -1),
end: AlignmentDirectional(-1, 1),
),
borderRadius: BorderRadius.circular(30),
),
child: InkWell(
onTap: () {
String path = '/$index';
Get.toNamed(path);
},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
SvgPicture.asset(
'assets/icons/$index.svg',
color: Colors.red,
),
Text(index),
],
),
),
))
.toList(),
onReorder: (oldIndex, newIndex) async {
String path = homeButtons.removeAt(oldIndex);
homeButtons.insert(newIndex, path);
setState(() {
box.remove(key);
box.write(key, homeButtons);
});
},
),
以下是我try 过的:
我已try 添加带有 colored颜色 的父容器.透明背景:
.map((index) => Container(
key: ValueKey(index),
decoration: BoxDecoration(
color: Colors.transparent,
),
child: Container(
alignment: Alignment.center,
width: double.infinity,
decoration: BoxDecoration(
gradient: const LinearGradient(
colors: [
Color(0xFF4D4D64),
Color(0xFF363649)
],
stops: [0, 1],
begin: AlignmentDirectional(1, -1),
end: AlignmentDirectional(-1, 1),
),
borderRadius: BorderRadius.circular(30),
),
child: InkWell(
onTap: () {
String path = '/$index';
Get.toNamed(path);
},
child: Column(..),
),
),
))
我也试着在墨水井里往上走:
.map((index) => Container(
key: ValueKey(index),
decoration: BoxDecoration(
color: Colors.transparent,
),
child: InkWell(
onTap: () {
String path = '/$index';
Get.toNamed(path);
},
child: Container(
alignment: Alignment.center,
width: double.infinity,
decoration: BoxDecoration(
gradient: const LinearGradient(
colors: [
Color(0xFF4D4D64),
Color(0xFF363649)
],
stops: [0, 1],
begin: AlignmentDirectional(1, -1),
end: AlignmentDirectional(-1, 1),
),
borderRadius: BorderRadius.circular(30),
),
child: Column(...),
),
),
))
最后，我try 将这个透明容器在SafeArea中向上移动
return Scaffold(
backgroundColor: const Color(0xFF2f2e3c),
appBar: AppBar(
backgroundColor: const Color(0xFF2f2e3c),
elevation: 0,
title: Text(
'Q.bit',
style: GoogleFonts.outfit(
textStyle: const TextStyle(
color: Colors.white,
fontSize: 25.0,
),
),
),
centerTitle: true,
),
body: Container(
decoration: BoxDecoration(
color: Colors.transparent,
),
child: SafeArea(...),
我总是在容器 colored颜色 上遇到同样的问题.
有人能帮我吗？
提前谢谢你
