flutter - Flutter:列行[初学者]
问题描述
我是 Flutter 的新手,目前我尝试编写我的第一个应用程序。我只想实现一个带有文本字段的屏幕——这很有效。现在我想将前两个文本字段并排排列。我尝试使用 Row () 并且没有收到任何错误,但突然模拟器显示我只是一个空白页。
有人可以告诉我我必须改变什么吗?我不知道我做错了什么,因为我没有得到任何错误。
感谢帮助!
import 'package:flutter/material.dart';
class TestEdit extends StatefulWidget {
@override
_TestEditState createState() => _TestEditState();
}
class _TestEditState extends State<TestEdit> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
automaticallyImplyLeading: true,
//`true` if you want Flutter to automatically add Back Button when needed,
//or `false` if you want to force your own back button every where
backgroundColor: Colors.white,
leading: IconButton(
icon: Icon(Icons.arrow_back, color: Colors.black),
onPressed: () => Navigator.pop(context, false),
),
),
body: Column(
children: <Widget>[
Row(
crossAxisAlignment: CrossAxisAlignment.start,
//mainAxisSize: MainAxisSize.min,
//padding: EdgeInsets.symmetric(horizontal: 10, vertical: 10),
children: <Widget>[
//Row(children:[
//crossAxisAlignment: CrossAxisAlignment.start,
//mainAxisSize: MainAxisSize.min,
Padding(
padding: EdgeInsetsDirectional.fromSTEB(10, 10, 10, 0),
child: TextField(
obscureText: false,
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'InputFirst',
),
),
),
Padding(
padding: EdgeInsetsDirectional.fromSTEB(10, 10, 10, 0),
child: TextField(
obscureText: false,
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'InputSecond',
),
),
),
],
),
//],
Padding(
padding: EdgeInsetsDirectional.fromSTEB(10, 10, 10, 0),
child: TextField(
obscureText: false,
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Input',
),
),
),
Padding(
padding: EdgeInsetsDirectional.fromSTEB(10, 10, 10, 0),
child: TextField(
obscureText: false,
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Input',
),
),
),
Padding(
padding: EdgeInsetsDirectional.fromSTEB(10, 10, 10, 0),
child: TextField(
obscureText: false,
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Input',
),
),
),
Padding(
padding: EdgeInsetsDirectional.fromSTEB(10, 10, 10, 0),
child: TextField(
obscureText: false,
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Input',
),
),
),
Padding(
padding: EdgeInsetsDirectional.fromSTEB(10, 10, 10, 0),
child: TextField(
obscureText: false,
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Input',
),
),
),
Padding(
padding: EdgeInsetsDirectional.fromSTEB(10, 10, 10, 0),
child: TextField(
obscureText: false,
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Input',
),
),
),
],
),
);
}
}
解决方案
TextField
小部件将尝试尽可能多地水平扩展。
所以如果你想把一个TextField
放在 a 中Row
,你应该用Flexible
(或Expanded
)小部件包装它。
尝试这个,
class TestEdit extends StatefulWidget {
@override
_TestEditState createState() => _TestEditState();
}
class _TestEditState extends State<TestEdit> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
automaticallyImplyLeading: true,
//`true` if you want Flutter to automatically add Back Button when needed,
//or `false` if you want to force your own back button every where
backgroundColor: Colors.white,
leading: IconButton(
icon: Icon(Icons.arrow_back, color: Colors.black),
onPressed: () => Navigator.pop(context, false),
),
),
body: Column(
children: <Widget>[
Row(
crossAxisAlignment: CrossAxisAlignment.start,
//mainAxisSize: MainAxisSize.min,
//padding: EdgeInsets.symmetric(horizontal: 10, vertical: 10),
children: <Widget>[
//Row(children:[
//crossAxisAlignment: CrossAxisAlignment.start,
//mainAxisSize: MainAxisSize.min,
Expanded( //TODO: Wrap with `Expanded`
child: Padding(
padding: EdgeInsetsDirectional.fromSTEB(10, 10, 10, 0),
child: TextField(
obscureText: false,
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'InputFirst',
),
),
),
),
Expanded( //TODO: Wrap with Expanded
child: Padding(
padding: EdgeInsetsDirectional.fromSTEB(10, 10, 10, 0),
child: TextField(
obscureText: false,
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'InputSecond',
),
),
),
),
],
),
//],
Padding(
padding: EdgeInsetsDirectional.fromSTEB(10, 10, 10, 0),
child: TextField(
obscureText: false,
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Input',
),
),
),
Padding(
padding: EdgeInsetsDirectional.fromSTEB(10, 10, 10, 0),
child: TextField(
obscureText: false,
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Input',
),
),
),
Padding(
padding: EdgeInsetsDirectional.fromSTEB(10, 10, 10, 0),
child: TextField(
obscureText: false,
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Input',
),
),
),
Padding(
padding: EdgeInsetsDirectional.fromSTEB(10, 10, 10, 0),
child: TextField(
obscureText: false,
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Input',
),
),
),
Padding(
padding: EdgeInsetsDirectional.fromSTEB(10, 10, 10, 0),
child: TextField(
obscureText: false,
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Input',
),
),
),
Padding(
padding: EdgeInsetsDirectional.fromSTEB(10, 10, 10, 0),
child: TextField(
obscureText: false,
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Input',
),
),
),
],
),
);
}
}
推荐阅读
- tcl - 在 Tcl 中使用括号和空格字符
- javascript - 似乎无法使用空依赖数组影响 React 的 useEffect() 中的状态。套接字.io
- django - Django Queryset 获取值
- java - 如何在本地保存和加载自定义对象的键?
- r - 有什么方法可以将 RGB/CIElab 值转换为 R 中的图像?
- pvlib - 导入天气数据时出现双面辐射错误
- html - Swift UITextView HTML Image在复制时导致崩溃
- selenium - 如何使用 selenium java 关闭这种类型的弹出窗口?
- django - 如何使用嵌套的 crud 在 Django 中创建基于类的视图?
- r - RShiny:在服务器中引用来自 UI 的数据