非常にシンプルなToDoアプリを作成しようとしています。これは、画面上部のaTextField
とButton
(フォーム)で構成され、ユーザー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'),
),
],
)
])),
);
}
}
ありがとう!
Expanded
ListViewの周りにウィジェットを使用する必要があります。子(この場合は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]
コメントを追加