并排制作两个小部件
Posted
技术标签:
【中文标题】并排制作两个小部件【英文标题】：Make two widgets side by side 【发布时间】：2018-10-26 20:06:45 【问题描述】：我有以下代码，我想要国家代码和电话号码并排，如何获得？我尝试了多个示例，有时它会完全消失，有时会崩溃。我有以下代码，我想要并排的国家代码和电话号码，如何获得？我尝试了多个示例，有时它会完全消失，有时会崩溃。
import 'package:flutter/material.dart';
class Signup extends StatefulWidget
Signup(Key key) : super (key:key);
final String title;
@override
SignupPage createState() => new SignupPage();
class SignupPage extends State<Signup>
List<String> _ccodes = <String>['', '+65', '+91', '+60', '+61'];
String _ccode = '';
@override
Widget build(BuildContext context)
final name = TextFormField(
keyboardType: TextInputType.text,
autofocus: false,
initialValue: 'Techie Quickie',
decoration: InputDecoration(
hintText: 'Name',
contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(32.0)
),
),
);
final email = TextFormField(
keyboardType: TextInputType.emailAddress,
autofocus: false,
initialValue: 'tq@gmail.com',
decoration: InputDecoration(
hintText: 'Email',
contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(32.0)
),
),
);
final password = TextFormField(
keyboardType: TextInputType.text,
obscureText: true,
autofocus: false,
initialValue: 'password',
decoration: InputDecoration(
hintText: 'Password',
contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(32.0)
),
),
);
final passwordConfirmation = TextFormField(
keyboardType: TextInputType.text,
obscureText: true,
autofocus: false,
initialValue: 'password',
decoration: InputDecoration(
hintText: 'Password',
contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(32.0)
),
),
);
final loginButton = Padding(
padding: EdgeInsets.symmetric(vertical: 16.0),
child: Material(
borderRadius: BorderRadius.circular(30.0),
shadowColor: Colors.lightBlueAccent.shade100,
elevation: 5.0,
child: MaterialButton(
minWidth: 200.0,
height: 42.0,
onPressed: ()
print("Signup button clicked");
,
color: Colors.lightBlueAccent,
child:
Text('Sign Up',
style: TextStyle(color: Colors.white, fontSize: 20.0),
),
),
)
);
final countryCode = DropdownButton<String>(
value: _ccode,
isDense: true,
items: _ccodes.map((String value)
return new DropdownMenuItem<String>(
value: value,
child: new Text(value),
);
).toList(),
onChanged: (String newValue)
setState(()
_ccode = newValue;
);
)
;
final phonenumber = TextFormField(
keyboardType: TextInputType.phone,
autofocus: false,
initialValue: '91166666',
decoration: InputDecoration(
hintText: 'Phone Number',
contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(32.0)
),
),
);
return Scaffold(
backgroundColor: Colors.white,
body: Center (
child: ListView(
padding: EdgeInsets.only(left: 24.0, right: 24.0),
shrinkWrap: true,
children: <Widget>[
name,
SizedBox(height: 18.0),
email,
SizedBox(height: 18.0),
password,
SizedBox(height: 18.0),
passwordConfirmation,
SizedBox(height: 18.0),
Row(
children: [
new Expanded(
child: new Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
countryCode,
SizedBox(height: 18.0),
],
),
),
],
),
phonenumber,
SizedBox(height: 18.0),
loginButton,
SizedBox(height: 38.0),
],
)
)
);
【问题讨论】：
【参考方案1】：问题与 TextField 的呈现方式及其尺寸有关。您可以在此question 和此issue 中找到更多详细信息。
无论如何，这段代码应该可以工作：
import 'package:flutter/material.dart';
void main()
runApp(new MaterialApp(
title: 'My app', // used by the OS task switcher
home: new Signup(),
));
class Signup extends StatefulWidget
Signup(Key key) : super(key: key);
final String title;
@override
SignupPage createState() => new SignupPage();
class SignupPage extends State<Signup>
List<String> _ccodes = <String>['', '+65', '+91', '+60', '+61'];
String _ccode = '';
@override
Widget build(BuildContext context)
final name = TextFormField(
keyboardType: TextInputType.text,
autofocus: false,
initialValue: 'Techie Quickie',
decoration: InputDecoration(
hintText: 'Name',
contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
border: OutlineInputBorder(borderRadius: BorderRadius.circular(32.0)),
),
);
final email = TextFormField(
keyboardType: TextInputType.emailAddress,
autofocus: false,
initialValue: 'tq@gmail.com',
decoration: InputDecoration(
hintText: 'Email',
contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
border: OutlineInputBorder(borderRadius: BorderRadius.circular(32.0)),
),
);
final password = TextFormField(
keyboardType: TextInputType.text,
obscureText: true,
autofocus: false,
initialValue: 'password',
decoration: InputDecoration(
hintText: 'Password',
contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
border: OutlineInputBorder(borderRadius: BorderRadius.circular(32.0)),
),
);
final passwordConfirmation = TextFormField(
keyboardType: TextInputType.text,
obscureText: true,
autofocus: false,
initialValue: 'password',
decoration: InputDecoration(
hintText: 'Password',
contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
border: OutlineInputBorder(borderRadius: BorderRadius.circular(32.0)),
),
);
final loginButton = Padding(
padding: EdgeInsets.symmetric(vertical: 16.0),
child: Material(
borderRadius: BorderRadius.circular(30.0),
shadowColor: Colors.lightBlueAccent.shade100,
elevation: 5.0,
child: MaterialButton(
minWidth: 200.0,
height: 42.0,
onPressed: ()
print("Signup button clicked");
,
color: Colors.lightBlueAccent,
child: Text(
'Sign Up',
style: TextStyle(color: Colors.white, fontSize: 20.0),
),
),
));
final countryCode = DropdownButton<String>(
value: _ccode,
isDense: true,
items: _ccodes.map((String value)
return new DropdownMenuItem<String>(
value: value,
child: new Text(value),
);
).toList(),
onChanged: (String newValue)
setState(()
_ccode = newValue;
);
);
final phonenumber = TextFormField(
keyboardType: TextInputType.phone,
autofocus: false,
initialValue: '91166666',
decoration: InputDecoration(
hintText: 'Phone Number',
contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
border: OutlineInputBorder(borderRadius: BorderRadius.circular(32.0)),
),
);
return Scaffold(
backgroundColor: Colors.white,
body: Center(
child: ListView(
padding: EdgeInsets.only(left: 24.0, right: 24.0),
shrinkWrap: true,
children: <Widget>[
name,
SizedBox(height: 18.0),
email,
SizedBox(height: 18.0),
password,
SizedBox(height: 18.0),
passwordConfirmation,
SizedBox(height: 18.0),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
countryCode,
new Flexible(child: phonenumber),
],
),
SizedBox(height: 18.0),
loginButton,
SizedBox(height: 38.0),
],
)));
【讨论】：
【参考方案2】：尝试检查此网址：https://flutter.io/tutorials/layout/ 你可以在你的身体里有不同的行来拥有相邻的组件。
所以层次结构是这样的
Body
Container
Row
Child: (item1)
Child(item2)
希望这会有所帮助。 :)
【讨论】：
根本没有帮助。 我想知道这如何得到两个赞成票和大师本人的编辑。以上是关于并排制作两个小部件的主要内容，如果未能解决你的问题，请参考以下文章