Home Screen
所以我试着重新创建一个有点像iOS应用商店主页的布局。我想知道如何在“主页”标题旁边添加一个小的个人资料图标,如所附截图所示。我试着使用某些对齐方式,但似乎不起作用。有什么建议吗?我刚刚附上了下面的代码作为参考
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
resizeToAvoidBottomPadding: false,
body: Container(
width: double.infinity,
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
Colors.blue[900],
Colors.blue[300],
],
),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(height: 30),
Padding(
padding: EdgeInsets.all(20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(height: 20),
Text(
'Home',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontSize: 50,
fontWeight: FontWeight.bold,
),
),
SizedBox(height: 50),
Container(
padding: EdgeInsets.fromLTRB(80, 110, 80, 0),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(20),
),
color: Colors.white,
),
),
SizedBox(height: 30),
Container(
padding: EdgeInsets.fromLTRB(80, 110, 80, 0),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(20),
),
color: Colors.white,
),
),
SizedBox(height: 30),
Container(
padding: EdgeInsets.fromLTRB(80, 110, 80, 0),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(20),
),
color: Colors.white,
),
),
],
),
),
],
),
),
bottomNavigationBar: BottomNavigationBar(
currentIndex: currentIndex,
backgroundColor: Colors.white,
iconSize: 35,
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text('Home'),
backgroundColor: Colors.blue,
),
BottomNavigationBarItem(
icon: Icon(Icons.settings),
title: Text('Settings'),
backgroundColor: Colors.blue,
),
],
onTap: (index) {
setState(() {
currentIndex = index;
});
},
),
floatingActionButton: Container(
height: 80,
width: 80,
child: FloatingActionButton(
child: Icon(
Icons.add,
size: 40,
color: Colors.black,
),
backgroundColor: Colors.yellowAccent,
onPressed: () {
setState(() {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => AddRoom()),
);
});
},
),
),
),
);
3条答案
按热度按时间wgxvkvu91#
您应该能够做到这一点的一种方法是使用
Row
作为Column
的顶部子项,Column
将包含标题“Home”作为Text
小部件,并包含CircleAvatar
作为配置文件图像,并将该行的mainAxisAlignment
设置为spaceBetween
,如下所示。jljoyd4f2#
用
Row
Package 您的Text
nxagd54h3#
只需选择Icons.account_circle_rounded,您就会得到一个帐户图标。Like such