「ゼブラ」のような交互の色のデータテーブル行を作成する方法

debugcn 投稿 Dev

スミス

以下に示す例のようなテーブルを作成しようとしています。この例では、テーブルの行は灰色と白を交互に使用しています。MySQLデータベースからのデータを含むデータテーブルがありますが、特定の行数はわかりません。データ量に応じて変化します。このロジックでは、行数をカウントするカウンターが必要だと思います。行が偶数であると言えば、灰色で塗りつぶされます。しかし、私はFlutterを初めて使用するため、ここでこれを実装する方法がわかりません。また、例のページ上部で使用されているウィジェットの種類についてもお聞きしたいと思います。タブバーのように見えますね。

アンドレイ・トゥルコフスキー

使用できる要素のリストについてはListView、次のitemBuilderように必要な色を選択してください。

ListView.builder(
  reverse: true,
  itemBuilder: (BuildContext context, int position) {
    Color color = position.isOdd ? Colors.black12 : Colors.white; //choose color
    return ColoredWidget(color); // some widget with color background
  },
  itemCount: snapshot.data.questionList.length,
)

のUPD DataTable：

できないようです。
あなたがこの方法で見る場合buildにDataTableクラス-それが発生List<TableRow>して戻ってTableそれには、行のリスト：

final List<TableRow> tableRows = List<TableRow>.generate(
      rows.length + 1, // the +1 is for the header row
      (int index) {
        return TableRow(
          key: index == 0 ? _headingRowKey : rows[index - 1].key,
          decoration: index > 0 && rows[index - 1].selected ? _kSelectedDecoration
                                                            : _kUnselectedDecoration,
          children: List<Widget>(tableColumns.length),
        );
      },
    );

カスタムを作成する方法は、DataTableこのクラスをプロジェクトにコピーして、次のように変更するしかないと思います。


final BoxDecoration _customGrayDecoration = BoxDecoration(
  color: Color(0x1F000000),
);

return TableRow(
          key: index == 0 ? _headingRowKey : rows[index - 1].key,
          decoration: index > 0 && rows[index - 1].selected
              ? _kSelectedDecoration
              :
          index > 0 && index.isOdd
              ? _customGrayDecoration
              : _kUnselectedDecoration,
          children: List<Widget>(tableColumns.length),
        );

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集2021-06-12

コメントを追加

サインイン

分類Dev

Related 関連記事

記事