Flutter - ListViewを自動的にスクロールする方法部分的に目に見えるフラットボタンを完全に見えるようにする -- flutter フィールド と dart フィールド 関連 問題

Flutter - how to scroll a ListView automatically to make a partially visible Flat Button completely visible












0
vote

問題

日本語

私のアプリは、10のフラットボタンのシンプルなアプリバーと水平スクロール可能なリストビューです。

href="https://i.stack.imgur.com/3pjil.png" rel="nofollow noreferrer">スクリーンショット

あなたが見ることができるように、部分的に目に見えるフラットボタンがあります。

これを完全に見えるように、ユーザーが部分的に見えるフラットボタンを押すと、ListViewをプログラムでスクロールしたいです。

どうすればいいですか?

ここに私のコードを添付します:

<事前> <コード> class _DashboardScreenState extends State<DashboardScreen> { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('FlutterApp'), ), body: Container( height: 70.0, child: ListView.builder( scrollDirection: Axis.horizontal, itemCount: 10, itemBuilder: (context, index) => _scrollableList(context, index), ), ), ); } } Widget _scrollableList (BuildContext context, int index){ return Container( child: FlatButton( color: Colors.white, textColor: Colors.red, onPressed: (){}, shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(10.0), side: BorderSide(color: Colors.red) ), child: Text('data $index'), ) ); }
英語

My App is a simple AppBar and a horizontal scrollable ListView of ten FlatButtons.

Screenshot

As you can see there is a partially visible FlatButton.

I want to scroll the ListView programatically when user press the partially visible FlatButton, to make this one completely visible.

How can i do that?

I attach my code here:

class _DashboardScreenState extends State<DashboardScreen> {   @override   Widget build(BuildContext context) {     return Scaffold(       appBar: AppBar(         title: Text('FlutterApp'),       ),       body: Container(         height: 70.0,         child: ListView.builder(           scrollDirection: Axis.horizontal,           itemCount: 10,           itemBuilder: (context, index) => _scrollableList(context, index),         ),       ),     );   } }  Widget _scrollableList (BuildContext context, int index){   return Container(      child: FlatButton(       color: Colors.white,       textColor: Colors.red,       onPressed: (){},       shape: RoundedRectangleBorder(         borderRadius: BorderRadius.circular(10.0),         side: BorderSide(color: Colors.red)       ),       child: Text('data $index'),     )   ); } 
</div
     

回答リスト

0
 
vote

ScrollablePositionedList から `flutter_widgets プラグインを使用して実現できます。

ListViewを以下のように作成します。

 <コード> ItemScrollController _scrollController = ItemScrollController();  ScrollablePositionedList.builder(   itemScrollController: _scrollController,   scrollDirection: Axis.horizontal,   itemCount: 10,   itemBuilder: (context, index) => _scrollableList(context, index), )   

下記のようにボタンをタップしてそのボタンまでスクロールします。

 <コード> onPressed: (){ _scrollController.scrollTo(index: index, duration: Duration(seconds: 1)); }   

あなたが疑問があるかどうか私に知らせてください。

 

you can use ScrollablePositionedList from `flutter_widgets plugin to achieve this.

Create you ListView as below:

ItemScrollController _scrollController = ItemScrollController();  ScrollablePositionedList.builder(   itemScrollController: _scrollController,   scrollDirection: Axis.horizontal,   itemCount: 10,   itemBuilder: (context, index) => _scrollableList(context, index), ) 

on tap of button scroll to that button as below:

onPressed: (){ _scrollController.scrollTo(index: index, duration: Duration(seconds: 1)); } 

let me know if you have any doubts.

</div
 
 
         
         

関連する質問

6  httpserverに複数のハンドラを登録するには、DARTで、httpserverのハンドラを登録しますか?  ( How do i register multiple handlers for a httpserver in dart ) 
(私はDart:IOの新しいlib v2バージョンを使用しています。) HTTPServer、特にWebSocketTransformerおよび他の任意のハンドラに複数のハンドラを登録したいです。このようなもの: <コード> // pseudo-code ...

1  DART Gmail API 'Send'メソッドQualtiaPireQueStrorを返します  ( Dart gmail api send method returning detailedapirequesterror ) 
私は再構築 flutter の私の個人的なウェブサイトで、フォームが記入された後に電子メールを送る必要があります。 gmail API Dart Library を使って電子メールを送信しようとしています。 エラー:aimplyapireQuesterro...

1  DARTのReflectionを使用して、クラスミラーからのゲッターや属性を取得しますか?  ( Obtain getters and or attributes from classmirror using reflection in dart ) 
以前のバージョンのDartはを使ってゲッターを取得できました <コード> cm.getters.values この回答で掲示されているように: https://stackoverflow.com/a/a/14505025/2117440 しかし実際の...

2  angular.dartとrootコントローラ/コンポーネント  ( Angular dart and the root controller component ) 
Angular.DARTプログラムを持っており、メインプログラムに角度機能を追加したい(任意のコンポーネントの外部)。私はこれを達成する方法について読んで、これを達成するために.rootContextTypeプロパティを使用する必要があるようです。 これは...

2  DARTのネームスペース内の要素を作成します  ( Creating an element in a namespace in dart ) 
DARTの特定のネームスペース内の要素を作成しようとしています。これはそれをするための最良の方法です: <事前> <コード> document.$dom_createElementNS(namespace, tag); ドキュメントここ 追加の関数名の$...

0  DART / FlutterプロジェクトにJSONエンコードされたデータを保存する最善の方法は何ですか?  ( Whats the best way to store the json encoded data in dart flutter project ) 
私はAPI経由で渡された大量のデータを考えていました。今まで私は以下のように物事をやっていました。私が直面している問題は、特定のレコードが以下の与えられた例のように最大7つのサブレコードを持つことができることです。これを扱う方法? 下記のデータのモデルを作成...

1  リストオンリスト<Dynamic>コンパレータのINTの代わりに動的に取得  ( Sort on listdynamic gets dynamic instead of int in comparator ) 
私はフラッターが新しいもので、リストを並べ替えることができないようです href="https://i.stack.imgur.com/ptwcz.png" rel="nofollow noreferrer"> 画像からのコード: <事前> <コード> ...

0  Flutter&Provider:StreamProviderを2つの異なる値に聴くことができますか?  ( Flutter provider how do i make my streamprovider listen to two different val ) 
次のコードがあるとしましょう。以下のコードは、 AuthService().user の1つの値を聴くだけです。プロバイダを別の値に聴くのはどうですか?その値を呼び出しましょう。 isVoted 。 <事前> <コード> Widget build(BuildC...

0  Dart:他のブロックでBlocイベントを正しく発送する方法  ( Dart how to properly dispatch bloc event in another bloc ) 
LoginBlocで認証ブロックにアクセスする必要があるので、ログインが成功した場合はauthenticationLogin()イベントを起動できます。私がこれまでにしたことは機能していません。 私がやったこと: <事前> <コード> class Login...

1  Webコンポーネントのメソッドを呼び出してイベントに応答する  ( Call a method of a web component and respond to events ) 
私はいくつかのアニメーションを持つweb_uiパッケージを持つカスタム要素を作成したDARTプロジェクトに取り組んでいます。私がしたいことは、このような要素のためのダーツコードの中にあることです.... <コード> class MyElement exte...




© 2022 cndgn.com All Rights Reserved. Q&Aハウス 全著作権所有