0

我在 .的右侧有 a和Rowa 。TextFieldIconButtonTextField

目标是让IconButton屏幕外&当用户开始输入时，TextField宽度应该缩小（右边的填充会更新）&IconButton会滑入视图。如果用户退格所有字符，则会发生相反的情况。

我的滑动件工作得很好，但我似乎无法获得TextField正确的填充来更新。现在我只看到按钮所在的空白区域，然后当我输入时我看到它滑入，当我退格到空时我看到IconButton滑出屏幕。

这是我现在的样子：

import 'package:flutter/material.dart';

class MyApp extends StatefulWidget {
  const MyApp({
    Key? key,
  }) : super(key: key);

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

class _MyAppState extends State<MyApp>
    with SingleTickerProviderStateMixin {

  final _textController = TextEditingController();

  late AnimationController _animationController;
  late Animation<Offset> offset;

  double padValue = 8;

  @override
  void initState() {
    super.initState();

    _animationController =
        AnimationController(duration: Duration(milliseconds: 200), vsync: this);

    offset = Tween<Offset>(
      begin: Offset(1, 0),
      end: Offset.zero,
    ).animate(_animationController);
  }

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

  _onChanged(String value) {
    setState(() {
      if (value.length == 0.0) {
        padValue = 8;
        _animationController.reverse();
      } else {
        padValue = 16;
        _animationController.forward();
      }
    });
  }

  @override
  Widget build(BuildContext context) {
      return _buildInputArea(context);
  }

  Widget _buildInputArea(BuildContext context) {
    return ConstrainedBox(
      constraints: BoxConstraints(
        maxHeight: 300.0,
      ),
      child: Scrollbar(
        child: SingleChildScrollView(
          scrollDirection: Axis.vertical,
          reverse: true,
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Expanded(
                child: AnimatedPadding(
                  curve: Curves.easeInOut,
                  duration: Duration(
                    milliseconds: 200,
                  ),
                  padding: EdgeInsets.only(
                    left: 16.0,
                    right: padValue,
                  ),
                  child: TextField(
                    maxLength: null,
                    controller: _textController,
                    onChanged: _onChanged,
                    onSubmitted: (_) {},
                    textCapitalization: TextCapitalization.sentences,
                    expands: false,
                    minLines: 1,
                    maxLines: 3,
                    autofocus: true,
                    decoration: InputDecoration(
                      counterText: '',
                      filled: true,
                      fillColor: Colors.white,
                      border: InputBorder.none,
                      focusedBorder: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(20),
                      ),
                      enabledBorder: OutlineInputBorder(
                        borderSide: BorderSide(
                          color: Colors.transparent,
                        ),
                        borderRadius: BorderRadius.circular(20),
                      ),
                      errorBorder: InputBorder.none,
                      disabledBorder: InputBorder.none,
                      hintText: 'type here...',
                      contentPadding: EdgeInsets.only(
                        top: 12,
                        left: 16,
                        right: 16,
                        bottom: 12,
                      ),
                      alignLabelWithHint: true,
                    ),
                  ),
                ),
              ),
              _buildButton(),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildButton() {
    return SlideTransition(
      position: offset,
      child: IconButton(
        alignment: Alignment.center,
        iconSize: 24,
        icon: Icon(
          Icons.send,
          color: Colors.white,
        ),
        onPressed: () {},
      ),
    );
   }
 }
4

0 回答 0