【问题标题】:TextField Cursor Position Flutter WEBTextField 光标位置 Flutter WEB
【发布时间】:2021-05-22 03:55:44
【问题描述】:

这段代码的作用是在您单击光标时打印光标在文本中的位置。

  TextEditingController controller = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          widget.title,
        ),
      ),
      body: TextField(
        controller: controller,
        keyboardType: TextInputType.multiline,
        maxLines: null,
        onTap: () {
          int pos = controller.selection.start;
          print(
            "Position: $pos",
          );
        },
      ),
    );
  }

但问题是这是针对网络的,所以我需要它在光标移动时说出光标的位置,而不仅仅是在我点击它时。 我的意思是如果你用键盘移动光标,它也应该打印位置。

我已经尝试过使用 GestureDetector 和 Focus,但什么也没有。知道我可以使用什么吗?

更新: 我找到的解决方案如下,它完美地满足了我的需要:

TextEditingController controller = TextEditingController();

int cursorPosition = 0;

@override
void initState() {
  controller.addListener(() {
    setState(() {
      cursorPosition = controller.selection.base.offset;
      print("cursorPosition: $cursorPosition");
    });
  });
  super.initState();
}

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text(
        widget.title,
      ),
    ),
    body: TextField(
      controller: controller,
      keyboardType: TextInputType.multiline,
      maxLines: null,
    ),
  );
}

完整代码:

    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(
        primarySwatch: Colors.blue,
      ),
      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 _MyHomePageState extends State<MyHomePage> {
  TextEditingController controller = TextEditingController();

  int cursorPosition = 0;

  @override
  void initState() {
    controller.addListener(() {
      setState(() {
        cursorPosition = controller.selection.base.offset;
        print("cursorPosition: $cursorPosition");
      });
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          widget.title,
        ),
      ),
      body: TextField(
        controller: controller,
        keyboardType: TextInputType.multiline,
        maxLines: null,
      ),
    );
  }
}

【问题讨论】:

    标签: flutter dart flutter-web flutter-textinputfield


    【解决方案1】:

    我找到的解决方案如下,它可以完美地满足我的需要:

    TextEditingController controller = TextEditingController();
    
    int cursorPosition = 0;
    
    @override
    void initState() {
      controller.addListener(() {
        setState(() {
          cursorPosition = controller.selection.base.offset;
          print("cursorPosition: $cursorPosition");
        });
      });
      super.initState();
    }
    
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text(
            widget.title,
          ),
        ),
        body: TextField(
          controller: controller,
          keyboardType: TextInputType.multiline,
          maxLines: null,
        ),
      );
    }
    

    完整代码:

        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(
            primarySwatch: Colors.blue,
          ),
          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 _MyHomePageState extends State<MyHomePage> {
      TextEditingController controller = TextEditingController();
    
      int cursorPosition = 0;
    
      @override
      void initState() {
        controller.addListener(() {
          setState(() {
            cursorPosition = controller.selection.base.offset;
            print("cursorPosition: $cursorPosition");
          });
        });
        super.initState();
      }
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text(
              widget.title,
            ),
          ),
          body: TextField(
            controller: controller,
            keyboardType: TextInputType.multiline,
            maxLines: null,
          ),
        );
      }
    }
    

    【讨论】:

      【解决方案2】:
      onChanged: (value) {
            int pos = controller.selection.start;
            print(
              "Position: $pos",
            );
          },
      

      【讨论】:

      • 它不起作用,当您用键盘移动光标时,它不会将其视为更改,因此不会打印任何内容
      猜你喜欢
      • 1970-01-01
      • 2020-12-08
      • 1970-01-01
      • 1970-01-01
      • 2020-04-02
      • 2022-08-15
      • 1970-01-01
      • 2019-11-20
      • 1970-01-01
      相关资源
      最近更新 更多