yujunjun/AppFlowy
1
0
Fork 0
mirror of https://github.com/AppFlowy-IO/AppFlowy.git synced 2025-10-31 18:15:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: key issue of ReorderableRow

Browse Source
This commit is contained in:
Vincent Chan 2022-09-01 11:48:01 +08:00
parent 8229371f63
commit 2bbba547ee
2 changed files with 32 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/field_cell.dart
View File

@ -14,36 +14,32 @@ import 'field_type_extension.dart';
import 'field_cell_action_sheet.dart'; import 'field_cell_action_sheet.dart';
class GridFieldCell extends StatefulWidget { class GridFieldCell extends StatelessWidget {
final GridFieldCellContext cellContext; final GridFieldCellContext cellContext;
const GridFieldCell(this.cellContext, {Key? key}) : super(key: key); const GridFieldCell({
Key? key,
@override required this.cellContext,
State<StatefulWidget> createState() => _GridFieldCellState(); }) : super(key: key);
}
class _GridFieldCellState extends State<GridFieldCell> {
final popover = PopoverController();
@override @override
Widget build(BuildContext gridCellContext) { Widget build(BuildContext gridCellContext) {
return BlocProvider( return BlocProvider(
create: (context) => FieldCellBloc(cellContext: widget.cellContext) create: (context) {
..add(const FieldCellEvent.initial()), return FieldCellBloc(cellContext: cellContext);
},
child: BlocBuilder<FieldCellBloc, FieldCellState>( child: BlocBuilder<FieldCellBloc, FieldCellState>(
// buildWhen: (p, c) => p.field != c.field,
builder: (context, state) { builder: (context, state) {
final button = Popover( final button = Popover(
controller: popover,
direction: PopoverDirection.bottomWithLeftAligned, direction: PopoverDirection.bottomWithLeftAligned,
triggerActions: PopoverTriggerActionFlags.click,
child: FieldCellButton( child: FieldCellButton(
field: state.field, field: cellContext.field,
onTap: () => popover.show(), onTap: () {},
), ),
offset: const Offset(0, 10), offset: const Offset(0, 10),
popupBuilder: (BuildContext context) { popupBuilder: (BuildContext context) {
return GridFieldCellActionSheet( return GridFieldCellActionSheet(
cellContext: widget.cellContext, cellContext: cellContext,
); );
}, },
); );
@ -112,6 +108,7 @@ class _DragToExpandLine extends StatelessWidget {
child: GestureDetector( child: GestureDetector(
behavior: HitTestBehavior.opaque, behavior: HitTestBehavior.opaque,
onHorizontalDragUpdate: (value) { onHorizontalDragUpdate: (value) {
debugPrint("update new width: ${value.delta.dx}");
context context
.read<FieldCellBloc>() .read<FieldCellBloc>()
.add(FieldCellEvent.startUpdateWidth(value.delta.dx)); .add(FieldCellEvent.startUpdateWidth(value.delta.dx));

20
frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/grid_header.dart
View File

@ -75,6 +75,21 @@ class _GridHeader extends StatefulWidget {
} }
class _GridHeaderState extends State<_GridHeader> { class _GridHeaderState extends State<_GridHeader> {
final Map<String, ValueKey<String>> _gridMap = {};
/// This is a workaround for [ReorderableRow].
/// [ReorderableRow] warps the child's key with a [GlobalKey].
/// It will trigger the child's widget's to recreate.
/// The state will lose.
_getKeyById(String id) {
if (_gridMap.containsKey(id)) {
return _gridMap[id];
}
final newKey = ValueKey(id);
_gridMap[id] = newKey;
return newKey;
}
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final theme = context.watch<AppTheme>(); final theme = context.watch<AppTheme>();
@ -85,7 +100,10 @@ class _GridHeaderState extends State<_GridHeader> {
.where((field) => field.visibility) .where((field) => field.visibility)
.map((field) => .map((field) =>
GridFieldCellContext(gridId: widget.gridId, field: field)) GridFieldCellContext(gridId: widget.gridId, field: field))
.map((ctx) => GridFieldCell(ctx, key: ValueKey(ctx.field.id))) .map((ctx) => GridFieldCell(
key: _getKeyById(ctx.field.id),
cellContext: ctx,
))
.toList(); .toList();
return Container( return Container(