基于索引的计算（例如 50*index 以更改容器的宽度）和索引标题的动态导航

Question

下面是我的代码。我曾尝试使用 _navigation.indexOf 和 .indexWhere，但两者都想要 return 整数并且不允许我将它们转换为 num 数据类型。我希望生成至少 5 个可以用作导航按钮的尺寸减小的容器（例如 450 - 50*index）。如果这不能与 listview.builder 一起使用，是否可以选择 for 循环？

import 'package:flutter/material.dart';

class Navigation {
  final String title;

  Navigation(this.title);
}

class HomeScreen extends StatelessWidget {
  static const String id = '/';

  List<Navigation> _navigation = [
    Navigation('Title1'),
    Navigation('Title2'),
    Navigation('Title3'),
    Navigation('Title4'),
    Navigation('Title5'),
  ];

  int findIndex(List<Navigation> _navigation, String buttonName) {
    final getIndex =
        _navigation.indexWhere((element) => element.title == buttonName);
    return getIndex;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: null,
        body: ListView.builder(
            itemCount: _navigation.length,
            itemBuilder: (BuildContext nav, int index) {
              return TextButton(
                  onPressed: () {
                    Navigator.pushNamed(context, _navigation[index].title);
                  },
                  child: Container(
                      height: 50,
                      width: 450,
                      child: Text(
                        '${_navigation[index].title}',
                        textAlign: TextAlign.end,
                      )));
            }));
  }
}

Answer 1

我能想到两种方法。

首先像这样在Container小部件中使用margin。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: null,
      body: ListView.builder(
        itemCount: _navigation.length,
        itemBuilder: (BuildContext nav, index) {
          return Container(
            margin: EdgeInsets.only(
              left: (20.0 * index),
            ),
            alignment: AlignmentDirectional.centerStart,
            child: TextButton(
              onPressed: () {
                Navigator.pushNamed(context, _navigation[index].title);
              },
              child: Text(
                _navigation[index].title,
                textAlign: TextAlign.center,
              ),
            ),
          );
        },
      ),
    );
  }

第二个 像这样使用 Padding 小部件。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: null,
      body: ListView.builder(
        itemCount: _navigation.length,
        itemBuilder: (BuildContext nav, index) {
          return Padding(
            padding: EdgeInsets.only(
              left: (50.0 * index),
            ),
            child: TextButton(
              onPressed: () {
                Navigator.pushNamed(context, _navigation[index].title);
              },
              child: Text(
                _navigation[index].title,
                textAlign: TextAlign.center,
              ),
            ),
          );
        },
      ),
    );
  }

基于索引的计算（例如 50*index 以更改容器的宽度）和索引标题的动态导航

Calculation based on index (e.g. 50*index to change width of containers) AND dynamic navigation from indexed titles

indexing

listview

builder

dart

flutter