如何在 FLUTTER 的 stepper 中显示一个列表

Posted 2023-02-23

【中文标题】如何在 FLUTTER 的 stepper 中显示一个列表

【英文标题】：How to display a list in a step of stepper in FLUTTER

【发布时间】：2021-04-17 14:16:45

【问题描述】：

我正在尝试逐个上传文档并使用 ListView 将它们显示在列表中，但是当我单击第 4 步时，什么也没有发生。第四步打不开。

这是图片

这是代码

  List<Step> steps = [
Step(
  isActive: false,
  state: StepState.indexed,
  title: const Text('Attach your DOCUMENTS'),
  content: Column(
    children: <Widget>[
          ListView.builder(
            itemCount: documents.length,
            itemBuilder: (context, index) 
              final item = documents[index];

              return ListTile(
                title: Text("$item"),
              );
            ,
          ),
      Container(
        child: MouseRegion(
          cursor: SystemMouseCursors.click,
          child: GestureDetector(
            child: Icon(
              Icons.upload_file,
              color: Colors.grey,
            ),
            // onTap: () => 
          ),
        ),
      )
    ],
  ),
),

];

Scaffold(
  body: SafeArea(
    child: Container(
      child: Stepper(
          steps: steps,
          currentStep: currentStep,
          onStepContinue: next,
          onStepTapped: (step) => goTo(step),
          onStepCancel: cancel,
          type: StepperType.vertical,
          controlsBuilder: (BuildContext context, VoidCallback onStepContinue, VoidCallback onStepCancel) 
            return Column(
              children: <Widget>[
                SizedBox(height: size.width * 0.02),
                Row(
                  mainAxisAlignment: MainAxisAlignment
                      .start,
                  crossAxisAlignment: CrossAxisAlignment
                      .start,
                  children: <Widget>[
                    FlatButton(
                      color: Color(0XFFEFEFEF),
                      textColor: primaryColor,
                      disabledColor: Colors.grey,
                      disabledTextColor: Colors
                          .black,
                      padding: EdgeInsets.symmetric(
                          vertical: 15.0,
                          horizontal: 10.0),
                      onPressed: cancel,
                      child: Text(
                        "Back",
                        style: TextStyle(
                          fontSize: 15.0,
                        ),
                      ),
                    ),
                    SizedBox(width: size.width * 0.02),
                    FlatButton(
                      color: primaryColor,
                      textColor: Colors.white,
                      disabledColor: Colors.grey,
                      disabledTextColor: Colors
                          .black,
                      padding: EdgeInsets.symmetric(
                          vertical: 15.0,
                          horizontal: 10.0),
                      onPressed: next,
                      child: Text(
                        "Next",
                        style: TextStyle(
                          fontSize: 15.0,
                        ),
                      ),
                    ),
                  ],
                ),
              ],
            );
          
      )

我在 API 响应中获取的文档为：

documents = ["doc1", "doc2"];

我不知道我们是否可以在步进器中显示列表。 有没有其他方法可以做到这一点？

提前致谢！！

【参考方案1】：

尝试将shrinkWrap: true 放入ListView 小部件或用Expanded 小部件包装它。 这是dartpad 中的一个活生生的例子。

import 'package:flutter/material.dart';

void main() 
  runApp(MyApp());


class MyApp extends StatefulWidget 
  @override
  _MyAppState createState() => new _MyAppState();


class _MyAppState extends State<MyApp> 
  int _currentStep = 0;
  List<String> documents = ['file1.rst', 'file_2.txt', 'file_3.pdf'];
  @override
  Widget build(BuildContext context) 
    return new MaterialApp(
      title: 'App',
      home: new Scaffold(
        appBar: new AppBar(title: new Text('App')),
        body: new Stepper(
          type: StepperType.vertical,
          currentStep: _currentStep,
          onStepTapped: (int step) => setState(() => _currentStep = step),
          onStepContinue:
              _currentStep < 2 ? () => setState(() => _currentStep += 1) : null,
          onStepCancel:
              _currentStep > 0 ? () => setState(() => _currentStep -= 1) : null,
          steps: <Step>[
            new Step(
              title: new Text('Shipping'),
              content: new Text('This is the first step.'),
              isActive: _currentStep >= 0,
              state:
                  _currentStep >= 0 ? StepState.complete : StepState.disabled,
            ),
            new Step(
              title: new Text('Payment'),
              content: Column(
                children: <Widget>[
                  ListView.builder(
                    shrinkWrap: true,
                    itemCount: documents.length,
                    itemBuilder: (context, index) 
                      final item = documents[index];

                      return ListTile(
                        title: Text("$item"),
                      );
                    ,
                  ),
                  Container(
                    child: MouseRegion(
                      child: GestureDetector(
                        child: Icon(
                          Icons.upload_file,
                          color: Colors.grey,
                        ),
                        // onTap: () => 
                      ),
                    ),
                  )
                ],
              ),
              isActive: _currentStep >= 0,
              state:
                  _currentStep >= 1 ? StepState.complete : StepState.disabled,
            ),
            new Step(
              title: new Text('Order'),
              content: new Text('This is the third step.'),
              isActive: _currentStep >= 0,
              state:
                  _currentStep >= 2 ? StepState.complete : StepState.disabled,
            ),
          ],
        ),
      ),
    );
  

如果您遇到其他问题，请考虑使用您遇到的错误更新帖子。

【讨论】：

只需添加 shrinkWrap: true 即可。谢谢你:)