如何在 Flutter 的 Textfield 中启用 Tab（网页版）？

Question

我正在使用 Flutter web 开发一个 web 项目，我知道目前 Flutter web 仅处于 beta 版本。

基本上我正在使用文本字段实现 Web 代码编辑器，如果用户按 TAB 键，我想像往常一样缩进。但是，当我按下制表符时，它要么移动到下一个元素（假设我在文本区域下方有一个按钮），要么根本不缩进。有谁知道如何解决这个问题？

下面的示例代码：

 Widget build(BuildContext context) {
    return Container(
      color: Colors.black87,
      child: Padding(
        padding: EdgeInsets.all(8.0),
        child:TextField(
            controller: controller,
            onEditingComplete: (){print('editing complete');},
            onTap: (){},
            onChanged: (text){print(text);},
            style: TextStyle(fontStyle: FontStyle.italic,color: Colors.white),
            maxLines: 20,
            autofocus: true,
            decoration: InputDecoration.collapsed(hintText: "write code for the formation"),
            ),

      )

    );
  }
}

Answer 1

我已经用类似这样的方式添加了标签：

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData.dark(),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class InsertTabIntent extends Intent {
  const InsertTabIntent(this.numSpaces, this.textController);
  final int numSpaces;
  final TextEditingController textController;
}

class InsertTabAction extends Action {
  @override
  Object invoke(covariant Intent intent) {
    if (intent is InsertTabIntent) {
      final oldValue = intent.textController.value;
      final newComposing = TextRange.collapsed(oldValue.composing.start);
      final newSelection = TextSelection.collapsed(
          offset: oldValue.selection.start + intent.numSpaces);

      final newText = StringBuffer(oldValue.selection.isValid
          ? oldValue.selection.textBefore(oldValue.text)
          : oldValue.text);
      for (var i = 0; i < intent.numSpaces; i++) {
        newText.write(' ');
      }
      newText.write(oldValue.selection.isValid
          ? oldValue.selection.textAfter(oldValue.text)
          : '');
      intent.textController.value = intent.textController.value.copyWith(
        composing: newComposing,
        text: newText.toString(),
        selection: newSelection,
      );
    }
    return '';
  }
}

class _MyHomePageState extends State<MyHomePage> {
  TextEditingController textController;
  @override
  void initState() {
    super.initState();
    textController = TextEditingController();
  }

  @override
  void dispose() {
    textController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget.title)),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Actions(
              actions: {InsertTabIntent: InsertTabAction()},
              child: Shortcuts(
                shortcuts: {
                  LogicalKeySet(LogicalKeyboardKey.tab):
                      InsertTabIntent(2, textController)
                },
                child: TextField(
                  controller: textController,
                  textInputAction: TextInputAction.newline,
                  maxLines: 30,
                  keyboardType: TextInputType.multiline,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}