Question

因此,我想提出一个多页表格,上面有一条线性进展指标,而不是通常的双向目标,我对许多不同的SO网站进行了尝试,而任何网站都没有发挥作用,我都需要一切,

我想的是:

to have a different page for each step
a way to return the data collected from each step
a bar at the top to show how close you are to finishing the form
and a way to edit each page serperately

对我如何这样做的任何建议都会如此赞赏,并事先感谢你。

Answer 1

首先,它为你的问题提供了简短的解决办法(最简单的解决办法)。

the below code should be refactored and and can be enhanced, but i m presenting an idea. here s the code, the coming is the driver class that manages the Linear Progress Indicator(LPI) and page view.

class HomeScreen extends StatefulWidget {
   HomeScreen({super.key});

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  var pages =  [ FirstPage(),SecondPage(), ThirdPage(),FourthPage(),];

  int currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    print( called );
    return SafeArea(
      child: Scaffold(
        body: Column(
          children: [
             Padding(
               padding: EdgeInsets.symmetric(horizontal: 10,vertical: 30),
               child: LinearProgressIndicator(
                 color: Colors.blue.shade700,
                 value: (currentIndex+1) /4,
                 borderRadius: BorderRadius.circular(10),
                 minHeight: 20,
               ),
             ),
            Expanded(
              child: Padding(
                padding: const EdgeInsets.all(15),
                child: PageView(
                  children: pages,
                  onPageChanged: (i){
                    setState(() {
                      currentIndex = i;
                    });
                  },
                  padEnds: true,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

ok,页数变量是植被清单,每个植被在每一页都有所表述的内容。

见FirstPage。植被执行

class FirstPage extends StatelessWidget {

  static var controller = TextEditingController();
  const FirstPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: Text( First Page ),
        ),
        TextFormField(
          controller: controller,
          decoration: InputDecoration(
              label: Text( Name ),
            enabledBorder: OutlineInputBorder(
              borderRadius: BorderRadius.circular(8),
              borderSide: BorderSide(width: 1,color: Colors.blue)
            )
          ),
        ),
      ],
    );
  }
}

页: 1 第三页的执行与另一页相同。

class SecondPage extends StatelessWidget {
  static var controller = TextEditingController();
  const SecondPage({super.key});


  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: Text( Second Page ),
        ),
        TextFormField(
          controller: controller,
          decoration: InputDecoration(
            label: Text( phone ),
              enabledBorder: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(8),
                  borderSide: BorderSide(width: 1,color: Colors.blue)
              )
          ),
        ),
      ],
    );
  }
}

如果你注意到每一页(级)的文字领域都有控制者,使我们能够最后获得书面文本。

最后一页

class FourthPage extends StatelessWidget {
  static var controller = TextEditingController();
  const FourthPage({super.key});


  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: Text( Fourth Page ),
        ),
        TextFormField(
          controller: controller,
          onFieldSubmitted: (s){
            Navigator.of(context).push(
                MaterialPageRoute(
                    builder: (context)=> FinalScreen(),
                    settings: RouteSettings(
                      arguments: {
                         first  : FirstPage.controller.text,
                         second  : SecondPage.controller.text,
                         third  : ThirdPage.controller.text,
                         fourth  : FourthPage.controller.text
                      },
                    )
                )
            );
          },
          decoration: InputDecoration(
              label: Text( Password ),
              enabledBorder: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(8),
                  borderSide: BorderSide(width: 1,color: Colors.blue)
              )
          ),
        ),
      ],
    );
  }
}

第四页和最后一页有一条关键的编码线,在用户向文字领域提交价值时予以执行(在家庭或最后一页上浏览,并使用线路环境向该网页发送数据)。

用户收集数据的最后一页

class FinalScreen extends StatelessWidget { const FinalScreen({super.key}); @override Widget build(BuildContext context) { var data = ModalRoute.of(context)?.settings.arguments as Map<String,String>; return Scaffold( appBar: AppBar( title: Text( Final Screen ), centerTitle: true, ), body: Container( width: double.infinity, child: Column( mainAxisAlignment: MainAxisAlignment.spaceAround, crossAxisAlignment: CrossAxisAlignment.center, children: [ Text( first page data: ${data[ first ]} ), Text( second page data: ${data[ second ]} ), Text( third page data: ${data[ third ]} ), Text( fourth page data: ${data[ fourth ]} ), ], ), ), ); } }

notice: the above code doesn t make text input validation, you should do (wrap them with form you know) and validate user input on each page view swipe. if the input violates your rules swipe back to the previous page and alert the user (use page view controller).

这里的产出

友情链接