flutter - Flutter 通过拖动调整 TextField 的大小

Question

有什么方法可以创建类似这些点的东西，这有助于扩展TextField.

标签： flutterflutter-layout

Answer 1

截屏：

创建一个小部件。

class ExpandableTextField extends StatefulWidget {
  final double height;
  final double maxHeight;
  final double dividerHeight;
  final double dividerSpace;
  final Widget child;

  const ExpandableTextField({
    Key key,
    @required this.child,
    this.height = 44,
    this.maxHeight = 300,
    this.dividerHeight = 40,
    this.dividerSpace = 2,
  }) : super(key: key);

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

class _ExpandableTextFieldState extends State<ExpandableTextField> {
  double _height, _maxHeight, _dividerHeight, _dividerSpace;

  @override
  void initState() {
    super.initState();
    _height = widget.height;
    _maxHeight = widget.maxHeight;
    _dividerHeight = widget.dividerHeight;
    _dividerSpace = widget.dividerSpace;
  }

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: _maxHeight,
      child: Column(
        children: <Widget>[
          SizedBox(
            height: _height,
            child: widget.child,
          ),
          SizedBox(height: _dividerSpace),
          Container(
            height: _dividerHeight,
            width: 60,
            child: GestureDetector(
              child: FittedBox(child: Text("----")),
              onPanUpdate: (details) {
                setState(() {
                  _height += details.delta.dy;

                  // prevent overflow if height is more/less than available space
                  var maxLimit = _maxHeight - _dividerHeight - _dividerSpace;
                  var minLimit = 44.0;

                  if (_height > maxLimit)
                    _height = maxLimit;
                  else if (_height < minLimit) 
                    _height = minLimit;
                });
              },
            ),
          )
        ],
      ),
    );
  }
}

像这样使用它：

ExpandableTextField(
  child: TextField(
    decoration: InputDecoration(hintText: "Enter a message"),
    maxLines: 100, // give any number, but make sure it is not small
  ),
)