Flutter中如何在TextField边框和滚动条之间添加内边距？

Question

这是我当前的代码：

  Widget _buildContent(TextStyle _textStyle6) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Focus(
          onFocusChange: (hasFocus) => setState(() => focused = hasFocus),
          child: widget.scrollController != null 
            ? Scrollbar(
              controller: widget.scrollController,
              thickness: 10,
              trackVisibility: true,
              thumbVisibility: true,
              radius: Radius.circular(8),
              child: _buildTextField(_textStyle6),
            ) 
            : _buildTextField(_textStyle6),
        ),
        if (widget.outerHintText != null) Padding(
          padding: const EdgeInsets.only(left: 18, top: 6),
          child: Text(widget.outerHintText!, style: widget.outerHintStyle),
        ),
      ],
    );
  }

  Widget _buildTextField(TextStyle _textStyle6) {
    return TextFormField(
      style: _textStyle6,
      maxLength: widget.maxLength,
      minLines: widget.minLines,
      maxLines: widget.maxLines,
      keyboardType: widget.keyboardType,
      scrollController: widget.scrollController,
      // scrollPadding: EdgeInsets.all(30),
      decoration: InputDecoration(
        alignLabelWithHint: widget.alignLabelWithHint,
        border: OutlineInputBorder(),
        enabledBorder: OutlineInputBorder(
          borderSide: BorderSide(color: Colors.grey.shade300, width: 0.8),
        ),
        focusedBorder: OutlineInputBorder(
          borderSide: BorderSide(color: Color(0xff1a73e8), width: 2),
        ),
        labelText: widget.label,
        labelStyle: TextStyle(color: focused ? Color(0xff1a73e8) : Colors.black),
        contentPadding: EdgeInsets.symmetric(horizontal: 18, vertical: 20),
        prefixIcon: widget.prefixIcon,
        prefixIconColor: widget.prefixIconColor,
        constraints: widget.constraints,
      ),
    );
  }

小部件返回如下：

我想在 TextField 的右边框和滚动条之间添加一些填充。如何获得？

Answer 1

你可以用 ScrollbarTheme 包裹它并设置 crossAxisMargin:

const ScrollbarTheme(
  data: ScrollbarThemeData(crossAxisMargin: 10),
  child: Scrollbar(
    thickness: 10,
    trackVisibility: true,
    thumbVisibility: true,
    child: TextField(),
  ),
);

或者，您可以使用 RawScrollbar 并设置 crossAxisMargin：

const RawScrollbar(
  thickness: 10,
  trackVisibility: true,
  thumbVisibility: true,
  crossAxisMargin: 5,
  child: TextField(),
);

Answer 2

Container(
    padding: const EdgeInsets.only(
      right: 10.0,
    ),
    decoration: BoxDecoration(
      color: Color(),
      border: Border.all(
        color: Color(),
      ),
    ),
    child: Scrollbar(
      thickness: 5.0,
      controller: _scrollController,
      trackVisibility: true,
      thumbVisibility: true,
      child: TextFormField(
        maxLines: 8,
        textCapitalization: TextCapitalization.words,
        scrollController: _scrollController,
        decoration: const InputDecoration(
          hintText: '....',
          hintStyle: TextStyles.bodyTextLight,
          isDense: true,
          border: InputBorder.none,
          filled: true,
          fillColor: Color(),
        ),
      ),
    ),
  ),

您可以执行类似的操作，将文本字段和滚动条包装到容器中，并为该容器提供与文本字段相同的边框和背景样式。并在容器的右侧给它填充。

Answer 3

对我有用的代码是：

RawScrollbar(
controller:  _textFieldScrollController,
thumbColor: Colors.red,
thumbVisibility: true,
shape: StadiumBorder( side: BorderSide(color: Colors.amber, width: 1.0)),
padding: EdgeInsets.only(right: 8,top: 20),
child: TextFormField(
scrollController: _textFieldScrollController,
controller: commentBoxController,
...
))