[解決済み] 水平スクロール フラッターのテキスト
2022-03-01 07:08:11
質問
flutterのウェブアプリケーションで、長いテキストをクリッピングやエリプシングをせずに1行で表示しようと思っています。そのために、水平方向にスクロールできるようにしたいのです。以下のコードを見つけました。 https://www.geeksforgeeks.org/flutter-scrollable-text/
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
home: Scaffold(
//adding App Bar
appBar: AppBar(
backgroundColor: Color.fromRGBO(15, 157, 88, 1),
title: Text(
"GeeksForGeeks",
style: TextStyle(
color: Colors.white,
),
),
),
body: MyApp(),
),
));
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Container(
// adding margin
margin: const EdgeInsets.all(15.0),
// adding padding
padding: const EdgeInsets.all(3.0),
decoration: BoxDecoration(
// adding borders around the widget
border: Border.all(
color: Colors.blueAccent,
width: 5.0,
),
),
// SingleChildScrollView should be
// wrapped in an Expanded Widget
child: Expanded(
//contains a single child which is scrollable
child: SingleChildScrollView(
//for horizontal scrolling
scrollDirection: Axis.horizontal,
child: Text(
"GeeksForGeeks is a good platform to learn programming."
" It is an educational website.",
style: TextStyle(
color: Colors.green,
fontWeight: FontWeight.bold,
fontSize: 20.0,
letterSpacing: 3,
wordSpacing: 3,
),
),
),
),
),
);
}
}
しかし、それは私のために動作しませんでした。テキストはクリップされましたが、スクロールできません。そこで
overflow: TextOverflow.visible
をテキスト・ウィジェットに追加しましたが、結果は得られませんでした。
Text
の中に
SingleChildScrollView
が、この問題では一番簡単に思いつくことです。
どのように解決するのですか?
この問題が発生する原因は
Expanded
ウィジェットを使用します。これを削除すれば、問題なく動作します。
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Container(
// adding margin
margin: const EdgeInsets.all(15.0),
// adding padding
padding: const EdgeInsets.all(3.0),
decoration: BoxDecoration(
// adding borders around the widget
border: Border.all(
color: Colors.blueAccent,
width: 5.0,
),
),
child: SingleChildScrollView(
//for horizontal scrolling
scrollDirection: Axis.horizontal,
child: Text(
"GeeksForGeeks is a good platform to learn programming."
" It is an educational website.",
style: TextStyle(
color: Colors.green,
fontWeight: FontWeight.bold,
fontSize: 20.0,
letterSpacing: 3,
wordSpacing: 3,
),
),
),
),
);
}
}
関連
-
[解決済み] Flutter give コンテナ 丸みを帯びたボーダー
-
[解決済み] Flutter - くねくね動くアニメーションを作るには?
-
flutter TextField 入力ボックスコンポーネント
-
[解決済み】画面の幅や高さに対する割合で要素をサイズ調整する方法
-
[解決済み】Dartの名前付きパラメータと位置付きパラメータの違いは何ですか?
-
[解決済み】flutterでパッケージ名を変更する方法は?
-
[解決済み] Flutterでボタンの幅と高さを設定する方法は?
-
[解決済み] InkWellでリップルエフェクトが表示されない
-
[解決済み] FlutterError: アセットをロードできない
-
[解決済み] 画面の高さと幅の決め方
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] Flutter TextButton splashColor プロパティ
-
[解決済み] Flutter - くねくね動くアニメーションを作るには?
-
[解決済み] FlutterでborderRadiusを使用してコンテナにボーダーを追加する
-
[解決済み] ヌル値に対して使用されるヌルチェック演算子
-
[解決済み】Flutterでアプリケーションランチャーのアイコンを変更するには?
-
[解決済み】Flutterで背景画像を設定する方法は?
-
[解決済み】Flutterアプリにスプラッシュスクリーンを追加する
-
[解決済み] TextFieldの外や画面上の任意の場所をクリックした後、flutterのソフト入力キーボードを非表示にする方法は?
-
[解決済み] Flutter FirestoreでD8が発生:要求されたクラスを単一のdexファイルに収められない (# methods: 71610 > 65536) in Android Studio
-
[解決済み] FlutterでtextAlignプロパティはどのような状況で動作しますか?