如何在颤动屏幕中添加箭头形状

Question

我有一个包含 9 个项目的列表视图，每个项目的左侧都有相同的深蓝色图片

ListView.builder(
              itemCount: 9,
              itemBuilder: (BuildContext context, int index) {
                return Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 8.0),
                  child: Row(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      Image.asset(
                        "assets/logos/navy-circle.png",
                        width: 40,
                        height: 40,
                      ),
                      const SizedBox(width: 20),
                      Expanded(
                        child: Text(
                          'Paragraph ${index + 1}: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.',
                          style: const TextStyle(color: Colors.white, fontSize: 13, fontWeight: FontWeight.bold),
                        ),
                      ),
                    ],
                  ),
                );
              },
            ),

看起来像这样：

但我想添加一个箭头图标来抛出图像，如下所示：

有什么想法吗？谢谢

Answer 1

你可以试试这个：

ListView.builder(
        itemCount: 9 + 2, // top and buttom of arrow
        itemBuilder: (BuildContext context, int index) {
          if (index == 0) {
            // end of arrow
            return Padding(
              padding: const EdgeInsets.symmetric(horizontal: 8.0),
              child: Row(
                children: [
                  SizedBox(
                    height: 40,
                    width: 40,
                    child: Container(// replace this with your svg arrow tail
                      color: Colors.white,
                    ),
                  ),
                ],
              ),
            );
          }
          if (index == 11 - 1) {
            // head of arrow
            return Padding(
              padding: const EdgeInsets.symmetric(horizontal: 8.0),
              child: Row(
                children: [
                  SizedBox(
                    height: 40,
                    width: 40,
                    child: Container( // replace this with your svg arrow head
                      color: Colors.white,
                    ),
                  ),
                ],
              ),
            );
          }
          return Padding(
            padding: const EdgeInsets.symmetric(
              horizontal: 8.0,
            ),
            child: IntrinsicHeight(
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Stack(
                    alignment: Alignment.center,
                    children: [
                      Container(
                        width: 4,
                        color: Colors.white,
                      ),
                      Container(
                        width: 40,
                        height: 40,
                        decoration: const BoxDecoration(
                          shape: BoxShape.circle,
                          color: Colors.blueGrey,
                        ),
                      ),
                    ],
                  ),
                  const SizedBox(width: 20),
                  Expanded(
                    child: Padding(
                      padding: const EdgeInsets.symmetric(vertical: 8.0),
                      child: Text(
                        'Paragraph ${index + 1}: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.',
                        style: const TextStyle(
                            color: Colors.white,
                            fontSize: 13,
                            fontWeight: FontWeight.bold),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          );
        },
      )

注意：我没有箭头头部和尾部的 svgs，所以我使用了简单的白色容器，您可以用您的图像替换它们。

Answer 2

Uma sugestão para uma tela dinâmica é usar o Widget Steper (https://api.flutter.dev/flutter/material/Stepper-class.html)

/// Flutter code sample for [Stepper].

void main() => runApp(const StepperExampleApp());

类 StepperExampleApp 扩展 StatelessWidget { const StepperExampleApp({super.key});

@覆盖 小部件构建（BuildContext上下文）{ 返回MaterialApp( 主页： 脚手架（ appBar: AppBar(标题: const Text('Stepper Sample')), 主体：常量中心（ 子：StepperExample()， ), ), ）； } }

类 StepperExample 扩展 StatefulWidget { const StepperExample({super.key});

@覆盖 状态 createState() => _StepperExampleState(); }

类 _StepperExampleState 扩展状态 { int _index = 0;

@覆盖 小部件构建（BuildContext上下文）{ 返回步进器（ 当前步骤：_index， onStepCancel: () { 如果（_index > 0）{ 设置状态（（）{ _index -= 1; }); } }, onStepContinue: () { 如果（_索引<= 0) { setState(() { _index += 1; }); } }, onStepTapped: (int index) { setState(() { _index = index; }); }, steps: [ Step( title: const Text('Step 1 title'), content: Container( alignment: Alignment.centerLeft, child: const Text('Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.'), ), ), const Step( title: Text('Step 2 title'), content: Text('Content for Step 2'), ), ], ); } }