scrollbar的Textfield？

Question

我不是要用滚动条制作一个文字场，但是有一个特定的设计，但是我不能摩得这个标准，如果有人有解决方案，我搜索包裹或解决方案，但我没有一个解决方案，所以我在这里问也许有人可以帮助我。

有一张我试图达到的照片。

这就是我所拥有的。

我的代码，

MediaQuery.removePadding(
  context: context,
  removeTop: true,
  child: Scrollbar(
    radius: const Radius.circular(5),
    interactive: true,
    isAlwaysShown: true,
    trackVisibility: true,
    controller: scrollController,
    child: TextField(
      scrollController: scrollController,
      scrollPhysics: const BouncingScrollPhysics(),
      scrollPadding: EdgeInsets.zero,

感谢Advance。

Answer 1

您可以使用SINGLECHILDSCROLLVIEW创建自己的scrollableTexfield，例如：

class ScrollableTextField extends StatefulWidget {
  const ScrollableTextField({
    super.key,
    required this.placeholder,
    required this.controller,
  });

  final String placeholder;
  final TextEditingController controller;

  @override
  State<ScrollableTextField> createState() => _ScrollableTextFieldState();
}

class _ScrollableTextFieldState extends State<ScrollableTextField> {
  final ScrollController _scrollController = ScrollController();

  double _thumbHeight = 0;
  double _thumbTop = 0;

  @override
  void initState() {
    super.initState();
    _scrollController.addListener(_updateThumbPosition);
  }

  void _updateThumbPosition() {
    double maxScroll = _scrollController.position.maxScrollExtent;
    double currentScroll = _scrollController.position.pixels;
    double viewportHeight = _scrollController.position.viewportDimension;
    setState(() {
      if (maxScroll != 0) {
        _thumbTop = (currentScroll / maxScroll) * (viewportHeight - _thumbHeight);
        _thumbHeight = viewportHeight * viewportHeight / (maxScroll + viewportHeight);
      } else {
        _thumbTop = 0;
        _thumbHeight = 0;
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (BuildContext context, BoxConstraints constraints) {
        return Stack(
          children: <Widget>[
            SingleChildScrollView(
              controller: _scrollController,
              child: TextField(
                controller: widget.controller,
                keyboardType: TextInputType.multiline,
                maxLines: null,
                decoration: InputDecoration(
                  hintText: widget.placeholder,
                  border: InputBorder.none,
                  counterText: '',
                ),
                onChanged: (value) {
                  WidgetsBinding.instance.addPostFrameCallback((_) {
                    _updateThumbPosition(); // Update the scroll thumb position and height
                  });
                },
              ),
            ),

            // Track
            Positioned(
              top: 0,
              right: 0,
              child: _thumbHeight == 0
                  ? Container()
                  : Container(
                      width: 10,
                      height: constraints.maxHeight,
                      decoration: BoxDecoration(
                        color: Colors.grey[300],
                        borderRadius: BorderRadius.circular(5),
                      )),
            ),

            // Thumb
            Positioned(
              top: _thumbTop,
              right: 0,
              child: Container(
                width: 10,
                height: _thumbHeight,
                decoration: BoxDecoration(
                  color: Colors.blue,
                  borderRadius: BorderRadius.circular(5),
                ),
              ),
            ),
          ],
        );
      },
    );
  }
}

小部件有两个参数可以提供占位符和textedingedingcontroller。

在代码中，我使用textfield具有多个输入行，并且在文本更改时，我更新了拇指位置。
FrameCallback用于确保在选择ALL和DELETE操作之后进行更新。
定位的小部件用于可视化拇指和跟踪。

可以这样使用。我在小部件本身之外添加了一些装饰，但是可以嵌入其中。

Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: Container(
              height: 300,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(8),
                border: Border.all(
                  color: Colors.black,
                  width: 1,
                ),
              ),
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: ScrollableTextField(
                  placeholder: 'Placeholder',
                  controller: TextEditingController(),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}