在 Flutter 中滑动文本表单字段答案

【问题标题】：Sliding Text Form Fields in Flutter在 Flutter 中滑动文本表单字段
【发布时间】：2022-01-14 12:35:40
【问题描述】：

我想制作这样的文本字段，当我单击下一步时，它会像这样水平过渡。我怎样才能实现它？ 4秒视频链接： https://firebasestorage.googleapis.com/v0/b/my-chat-app-524e3.appspot.com/o/WhatsApp%20Video%202022-01-14%20at%207.42.17%20AM.mp4?alt=media&token=6eeddcf9-b145-437f-b049-121acd1209b1

【问题讨论】：

你想要同样的设计？
您可以使用带有滑动过渡的动画切换器，通过该滑动动画在多个文本表单之间切换

标签： flutter dart text flutter-animation

【解决方案1】：

我们可以使用transfrom 制作简单的动画，或者只使用pageview 类

看看这个：

import 'package:flutter/material.dart';

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

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

class _SlidingTextFieldState extends State<SlidingTextField> {
  late PageController _pageController;
  late List<TextEditingController> _tecList;

  @override
  void initState() {
    super.initState();
    _pageController = PageController();
    _tecList = List.generate(3, (index){
      return TextEditingController();
    });
  }

  @override
  void dispose() {
    for (var tec in _tecList) {
      tec.dispose();
    }
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Material(
      child: Column(
        children: [
          Expanded(
            child: Container(
              color: Colors.cyan,
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(25.0),
            child: Container(
              height: 120,
              child: PageView.builder(
                controller: _pageController,
                itemCount: 3,
                itemBuilder: (context, index) {
                  return Column(
                    mainAxisAlignment: MainAxisAlignment.start,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Padding(
                          padding: const EdgeInsets.symmetric(horizontal: 12.0),
                          child: Text(
                            "Details ${index+1}",
                            style: const TextStyle(color: Colors.grey),
                          ),
                        ),
                      ),
                      Padding(
                        padding: const EdgeInsets.symmetric(horizontal: 12.0),
                        child: TextField(
                          decoration: InputDecoration(
                              enabledBorder: _oInputBorder(),
                              focusedBorder: _oInputBorder()),
                          textInputAction: TextInputAction.done,
                          controller: _tecList[index],
                          onSubmitted: (text) {
                            int nextPage = index + 1;
                            if (nextPage < 3) {
                              _pageController.animateToPage(nextPage,
                                  duration: const Duration(milliseconds: 500),
                                  curve: Curves.ease);
                            }
                          },
                        ),
                      )
                    ],
                  );
                },
              ),
            ),
          ),
          Expanded(
            child: Container(
              color: Colors.yellow,
            ),
          )
        ],
      ),
    );
  }

  InputBorder _oInputBorder() {
    return OutlineInputBorder(
        borderRadius: BorderRadius.circular(15.0),
        borderSide: BorderSide(width: 1, color: Colors.grey.withOpacity(0.5)));
  }
}

结果：

【讨论】：