Q&A
質問内容
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)
以下のような質問にはグッドを送りましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
下記のような質問は推奨されていません。
- 間違っている
- 質問になっていない投稿
- スパムや攻撃的な表現を用いた投稿
適切な質問に修正を依頼しましょう。
回答1件
1
ベストアンサー
そういう機能を持っていないので、既存機能を使う限りはあきらめるしかないです。
可能な方法としては、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 @override 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
総合スコア1272
関連した質問
Q&A
解決済
flutterの環境構築、android license status unknown.とunable to find bundled java version が解決できません。
回答1
クリップ0
更新
2023/02/07
Q&A
解決済
flutter × firebaseでSign in with Appleを実装できない。
回答1
クリップ0
更新
2023/02/04
Q&A
解決済
メインの商品一覧画面から詳細画面に遷移するようにしたい。
回答1
クリップ0
更新
2023/01/24
Q&A
解決済
type 'Null' is not a subtype of type 'String'
回答2
クリップ0
更新
2023/01/18
Q&A
受付中
The expression doesn't evaluate to a function, so it can't be invoked.
回答1
クリップ0
更新
2023/02/07
Q&A
解決済
【Flutter】TabBarのunselectedLabelColorプロパティを効かせたいです。
回答1
クリップ0
更新
2023/01/29
Q&A
解決済
null check operator used on a null value
回答1
クリップ0
更新
2023/02/07
良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
2022/11/27 07:05