Flutterの同じ画面のListViewに沿ってウィジェットを表示するにはどうすればよいですか?

ヘサル

非常にシンプルなToDoアプリを作成しようとしています。これは、画面上部のaTextFieldButton(フォーム)で構成され、ユーザーListViewがのすぐ下にあるにアイテムを追加できるようにしますTextField

とを表示できます。TextFieldまた、Buttonを表示することもできますがListView、両方を同時に表示しようとすると、画面が空になります。

私は何かが足りないのですか?ListViewをColumnウィジェットに表示しようとしましたが、機能しないようです。

これがフォームのない私のショートコードです:

import 'package:flutter/material.dart';

void main(){
  runApp(MyApp());
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      title: "Mon app",
      home: Scaffold(
        appBar: AppBar(
          title: Text("My app")
        ),
        body: Column(
          children: <Widget>[
            ListView(
          children: <Widget>[
            ListTile(
              leading: Icon(Icons.map),
              title: Text('Map'),
            ),
            ListTile(
              leading: Icon(Icons.photo_album),
              title: Text('Album'),
            ),
            ListTile(
              leading: Icon(Icons.phone),
              title: Text('Phone'),
            ),
          ],
        )
          ])),
      );
  }
}

ありがとう!

ジョージ

ExpandedListViewの周りにウィジェットを使用する必要があります。子(この場合はListView)を拡張して、他のウィジェットが使用するスペースを除いて、親で使用可能な最大スペースに合わせます。

次に、下部に入力を追加する場合は、通常のウィジェットをの内側、Column外側に配置するだけListViewで、リストがスクロールし、TextFieldは常にページの下部に留まります。

これは下部入力の準備ができたコードですが、列、行、および拡張ウィジェットで何が起こっているのかを注意深く理解することをお勧めします。

import 'package:flutter/material.dart';

void main(){
  runApp(MyApp());
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      title: "Mon app",
      home: Scaffold(
          appBar: AppBar(
              title: Text("My app")
          ),
          body: Column(
            mainAxisSize: MainAxisSize.max,
              children: <Widget>[
                Expanded(
                  child: ListView(
                    children: <Widget>[
                      ListTile(
                        leading: Icon(Icons.map),
                        title: Text('Map'),
                      ),
                      ListTile(
                        leading: Icon(Icons.photo_album),
                        title: Text('Album'),
                      ),
                      ListTile(
                        leading: Icon(Icons.phone),
                        title: Text('Phone'),
                      ),
                    ],
                  ),
                ),
                Row(
                  children: <Widget>[
                    Expanded(
                      child: TextField(
                        decoration: InputDecoration(
                          hintText: "What to do?"
                        ),
                      ),
                    ),
                    IconButton(
                      icon: Icon(Icons.send),
                      onPressed: (){
                        //do something
                      },
                    )
                  ],
                )
              ],
          ),
      ),
    );
  }
}

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

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

編集
0

コメントを追加

0

関連記事

分類Dev

FlutterのListViewにDismissibleウィジェットを追加するにはどうすればよいですか?

分類Dev

2番目のウィジェット(コンテナ)を左に揃えたいのですが、中央に揃えています。他のウィジェットに沿って左に揃えるにはどうすればよいですか?

分類Dev

UserAccountsDrawerHeaderウィジェットのAccountDetailを実装して、Flutterを使用したGmailアプリと同じように表示するにはどうすればよいですか?

分類Dev

Flutterを使用して2つのListViewを同じ画面に表示するにはどうすればよいですか?

分類Dev

プロバイダーを使用して、画面上のすべてのウィジェットではなく、1つのウィジェットにテキストを同時にナビゲートするにはどうすればよいですか?

分類Dev

QT(C ++)UIを複数のウィジェットサブクラスに分割し、同じクラスのすべてと同じように表示するにはどうすればよいですか?

分類Dev

ListViewの上部にウィジェットを挿入するにはどうすればよいですか?

分類Dev

Flutterの列にウィジェットを動的に追加するにはどうすればよいですか?

分類Dev

Android:ConstraintLayoutを使用してウィジェットを別のウィジェットの上に表示するにはどうすればよいですか?

分類Dev

Neumorphicウィジェットを同心円のFlutterに配置するにはどうすればよいですか?

分類Dev

リストビューのデータをホーム画面ウィジェットに表示するにはどうすればよいですか?

分類Dev

オブジェクトの中心に沿って線を引くにはどうすればよいですか

分類Dev

同じウィンドウで2つのmatplotlibプロットを同時に表示および更新するにはどうすればよいですか?

分類Dev

Flutterで1つのウィジェットを画面の上部に配置し、別のウィジェットを画面の中央に配置するにはどうすればよいですか?

分類Dev

Flutterでウィジェットを別のウィジェットの上に配置するにはどうすればよいですか?

分類Dev

インデックスに沿って複数の配列にオブジェクトを追加するにはどうすればよいですか?

分類Dev

別のスレッドからの特定の値に従ってウィジェットを更新するにはどうすればよいですか?

分類Dev

ウィジェットのサイズを画面サイズと比較してフラッターにするにはどうすればよいですか?

分類Dev

gwt:別のイベントでonClickによって作成されたウィジェットを使用するにはどうすればよいですか?

分類Dev

同じウェブページで同じJavaScriptウィジェットを2回使用するにはどうすればよいですか?

分類Dev

Tkinterで同じ列の2つのウィジェットの幅を変えるにはどうすればよいですか?

分類Dev

2つのウィジェットを同じ行に配置するにはどうすればよいですか?

分類Dev

同じ行の別のウィジェットを表示した後、ウィジェットの移動を回避するにはどうすればよいですか?

分類Dev

FlutterのすべてのデバイスでウィジェットをMediaQueryに合わせるにはどうすればよいですか?

分類Dev

画面内(できればオフセット内)でウィジェットの位置を取得するにはどうすればよいですか?

分類Dev

ウィジェットが表示/非表示になったときにFlutterで確認するにはどうすればよいですか?

分類Dev

TextInputウィジェットに表示されているものを更新するにはどうすればよいですか?python kivy

分類Dev

openGL c ++の同じウィンドウに2つのオブジェクトを描画するにはどうすればよいですか?

分類Dev

tkinter Scaleウィジェットの現在の値が表示されている側を変更するにはどうすればよいですか?

Related 関連記事

  1. 1

    FlutterのListViewにDismissibleウィジェットを追加するにはどうすればよいですか?

  2. 2

    2番目のウィジェット(コンテナ)を左に揃えたいのですが、中央に揃えています。他のウィジェットに沿って左に揃えるにはどうすればよいですか?

  3. 3

    UserAccountsDrawerHeaderウィジェットのAccountDetailを実装して、Flutterを使用したGmailアプリと同じように表示するにはどうすればよいですか?

  4. 4

    Flutterを使用して2つのListViewを同じ画面に表示するにはどうすればよいですか?

  5. 5

    プロバイダーを使用して、画面上のすべてのウィジェットではなく、1つのウィジェットにテキストを同時にナビゲートするにはどうすればよいですか?

  6. 6

    QT(C ++)UIを複数のウィジェットサブクラスに分割し、同じクラスのすべてと同じように表示するにはどうすればよいですか?

  7. 7

    ListViewの上部にウィジェットを挿入するにはどうすればよいですか?

  8. 8

    Flutterの列にウィジェットを動的に追加するにはどうすればよいですか?

  9. 9

    Android:ConstraintLayoutを使用してウィジェットを別のウィジェットの上に表示するにはどうすればよいですか?

  10. 10

    Neumorphicウィジェットを同心円のFlutterに配置するにはどうすればよいですか?

  11. 11

    リストビューのデータをホーム画面ウィジェットに表示するにはどうすればよいですか?

  12. 12

    オブジェクトの中心に沿って線を引くにはどうすればよいですか

  13. 13

    同じウィンドウで2つのmatplotlibプロットを同時に表示および更新するにはどうすればよいですか?

  14. 14

    Flutterで1つのウィジェットを画面の上部に配置し、別のウィジェットを画面の中央に配置するにはどうすればよいですか?

  15. 15

    Flutterでウィジェットを別のウィジェットの上に配置するにはどうすればよいですか?

  16. 16

    インデックスに沿って複数の配列にオブジェクトを追加するにはどうすればよいですか?

  17. 17

    別のスレッドからの特定の値に従ってウィジェットを更新するにはどうすればよいですか?

  18. 18

    ウィジェットのサイズを画面サイズと比較してフラッターにするにはどうすればよいですか?

  19. 19

    gwt:別のイベントでonClickによって作成されたウィジェットを使用するにはどうすればよいですか?

  20. 20

    同じウェブページで同じJavaScriptウィジェットを2回使用するにはどうすればよいですか?

  21. 21

    Tkinterで同じ列の2つのウィジェットの幅を変えるにはどうすればよいですか?

  22. 22

    2つのウィジェットを同じ行に配置するにはどうすればよいですか?

  23. 23

    同じ行の別のウィジェットを表示した後、ウィジェットの移動を回避するにはどうすればよいですか?

  24. 24

    FlutterのすべてのデバイスでウィジェットをMediaQueryに合わせるにはどうすればよいですか?

  25. 25

    画面内(できればオフセット内)でウィジェットの位置を取得するにはどうすればよいですか?

  26. 26

    ウィジェットが表示/非表示になったときにFlutterで確認するにはどうすればよいですか?

  27. 27

    TextInputウィジェットに表示されているものを更新するにはどうすればよいですか?python kivy

  28. 28

    openGL c ++の同じウィンドウに2つのオブジェクトを描画するにはどうすればよいですか?

  29. 29

    tkinter Scaleウィジェットの現在の値が表示されている側を変更するにはどうすればよいですか?

ホットタグ

アーカイブ