基于索引的計算（例如50*index來改變容器的寬度）和索引標題的動態導航-有解無憂

下面是我的代碼。我曾嘗試使用 _navigation.indexOf 和 .indexWhere 但兩者都想回傳整數并且不允許我將它們轉換為 num dataTypes。我希望生成至少 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,
                      )));
            }));
  }
}

uj5u.com熱心網友回復：

我可以想到兩種方法。

首先margin在使用Container。

  @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,
              ),
            ),
          );
        },
      ),
    );
  }

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/429941.html

標籤：扑镖列表显示索引建设者

上一篇：如何通過添加Flutter制作類似的小部件串列

下一篇：根據資料集改變顏色（d3）