【问题标题】:Flutter Form Step and scrollingFlutter Form Step 和滚动
【发布时间】:2022-06-10 20:16:27
【问题描述】:

我有带有 Form 和 Stepper 小部件的 Flutter 视图。每个 Stepper 里面都有很多小部件。当我点击 Step 时,屏幕会自动滚动到新展开 Step 的末尾。单击后如何更改滚动以查看展开步骤的顶部?

(当我点击 STEP 2 时,STEP2 被展开,我看到 STEP2 的最后一个小部件,而不是 STEP2 的第一个小部件)

代码:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final String title;

  const MyHomePage({
    Key? key,
    required this.title,
  }) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int currentStep = 0;
  List<Step> generateSteps(int j) {
    List<Step> a = [];
    for (int i = 0; i < j; i++) {
      a.add(Step(
          title: const Text("STEP"),
          content: Column(children: generateWidgets(10))));
    }
    return a;
  }

  List<Widget> generateWidgets(int j) {
    List<Widget> a = [];

    for (int i = 0; i < j; i++) {
      a.addAll([
        Text("Field: $i"),
        TextFormField(
          decoration: const InputDecoration(
            hintText: 'Enter your email',
          ),
        ),
      ]);
    }
    return a;
  }

  @override
  Widget build(BuildContext context) {
    List<Step> ft = generateSteps(6);
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: SingleChildScrollView(
        child: Form(
            child: Stepper(
          currentStep: currentStep,
          onStepTapped: (int step) {
            setState(() {
              currentStep = step;
            });
          },
          steps: ft,
          physics: const NeverScrollableScrollPhysics(),
        )),
      ),
    );
  }
}

【问题讨论】:

  • 你能把你的代码放进去吗?欢呼
  • 刚刚添加了@James ;)

标签: flutter flutter-layout flutter-widget


猜你喜欢
  • 2020-09-13
  • 2017-04-24
  • 2019-07-08
  • 2021-02-25
  • 2018-11-09
  • 1970-01-01
  • 1970-01-01
  • 2021-02-05
  • 2021-09-02
相关资源
最近更新 更多