質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Flutter

Flutterは、iOSとAndroidのアプリを同じコードで開発するためのフレームワークです。オープンソースで開発言語はDart。双方のプラットフォームにおける高度な実行パフォーマンスと開発効率を提供することを目的としています。

Dart

Dartは、Googleによって開発されたJavaScriptの代替となることを目的に作られた、ウェブ向けのプログラミング言語である。

Q&A

解決済

1回答

826閲覧

【Flutter】TableウィジェットのTableBorder(horizontalInside)の長さの調整はどうするのでしょうか?

bbiiq

総合スコア51

Flutter

Flutterは、iOSとAndroidのアプリを同じコードで開発するためのフレームワークです。オープンソースで開発言語はDart。双方のプラットフォームにおける高度な実行パフォーマンスと開発効率を提供することを目的としています。

Dart

Dartは、Googleによって開発されたJavaScriptの代替となることを目的に作られた、ウェブ向けのプログラミング言語である。

0グッド

0クリップ

投稿2022/11/26 09:23

質問内容

FlutterのTableウィジェットを使っています。
TableBorderのhorizontalInsideプロパティを使って線をつけているのですが、その線の長さを調整を調べたのですが見つからなかったのですが、調整するにはどうしたらいいのでしょうか?
Dividerウィジェットの indent:プロパティやendIndentをTableウィジェットのBorderに設定したいです。

補足情報(FW/ツールのバージョンなど)

[✓] Flutter (Channel stable, 3.3.8, on macOS 13.0.1 22A400 darwin-arm, locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 14.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.3)
[✓] VS Code (version 1.73.0)

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

そういう機能を持っていないので、既存機能を使う限りはあきらめるしかないです。
可能な方法としては、TableBorderの派生を作り、その中のpaintでindent/endIndentを使った描画をするといったものです。

例えば以下の様なもの。

dart

1class CustomBorder extends TableBorder { 2 const CustomBorder({ 3 super.top = BorderSide.none, 4 super.right = BorderSide.none, 5 super.bottom = BorderSide.none, 6 super.left = BorderSide.none, 7 super.horizontalInside = BorderSide.none, 8 super.verticalInside = BorderSide.none, 9 super.borderRadius = BorderRadius.zero, 10 this.indent, 11 this.endIndent, 12 }); 13 14 final double? indent; 15 final double? endIndent; 16 17 18 void paint(Canvas canvas, Rect rect, 19 {required Iterable<double> rows, required Iterable<double> columns}) { 20 if (indent == null && endIndent == null) { 21 super.paint(canvas, rect, rows: rows, columns: columns); 22 } else { 23 assert(rows.isEmpty || (rows.first >= 0.0 && rows.last <= rect.height)); 24 assert(columns.isEmpty || 25 (columns.first >= 0.0 && columns.last <= rect.width)); 26 27 if (columns.isNotEmpty || rows.isNotEmpty) { 28 final Paint paint = Paint(); 29 final Path path = Path(); 30 31 if (columns.isNotEmpty) { 32 switch (verticalInside.style) { 33 case BorderStyle.solid: 34 paint 35 ..color = verticalInside.color 36 ..strokeWidth = verticalInside.width 37 ..style = PaintingStyle.stroke; 38 path.reset(); 39 for (final double x in columns) { 40 path.moveTo(rect.left + x, rect.top + indent!); 41 path.lineTo(rect.left + x, rect.bottom - endIndent!); 42 } 43 canvas.drawPath(path, paint); 44 break; 45 case BorderStyle.none: 46 break; 47 } 48 } 49 50 if (rows.isNotEmpty) { 51 switch (horizontalInside.style) { 52 case BorderStyle.solid: 53 paint 54 ..color = horizontalInside.color 55 ..strokeWidth = horizontalInside.width 56 ..style = PaintingStyle.stroke; 57 path.reset(); 58 for (final double y in rows) { 59 path.moveTo(rect.left + indent!, rect.top + y); 60 path.lineTo(rect.right - endIndent!, rect.top + y); 61 } 62 canvas.drawPath(path, paint); 63 break; 64 case BorderStyle.none: 65 break; 66 } 67 } 68 } 69 if (!isUniform || borderRadius == BorderRadius.zero) { 70 paintBorder(canvas, rect, 71 top: top, right: right, bottom: bottom, left: left); 72 } else { 73 final RRect outer = borderRadius.toRRect(rect); 74 final RRect inner = outer.deflate(top.width); 75 final Paint paint = Paint()..color = top.color; 76 canvas.drawDRRect(outer, inner, paint); 77 } 78 } 79 } 80}

投稿2022/11/27 02:23

ta.fu

総合スコア1667

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

bbiiq

2022/11/27 07:05

回答ありがとうございます。 サンプルコードまでありがとうございます。参考にさせていただきます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問