在Flutter中添加配置文件图标

uinbv5nw  于 2023-02-16  发布在  Flutter
关注(0)|答案(3)|浏览(137)

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()),
                );
              });
            },
          ),
        ),
      ),
    );
wgxvkvu9

wgxvkvu91#

您应该能够做到这一点的一种方法是使用Row作为Column的顶部子项,Column将包含标题“Home”作为Text小部件,并包含CircleAvatar作为配置文件图像,并将该行的mainAxisAlignment设置为spaceBetween,如下所示。

Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[
        Text(
          'Home',
          textAlign: TextAlign.center,
          style: TextStyle(
            color: Colors.white,
            fontSize: 50,
            fontWeight: FontWeight.bold,
          ),
        ),
        CircleAvatar(
          radius: 20,
          backgroundImage: NetworkImage(
            'https://source.unsplash.com/50x50/?portrait',
          ),
        ),
      ],
    )
jljoyd4f

jljoyd4f2#

Row Package 您的Text

Row(
                mainAxisAlignment: MainAxisAlignment.start, //change this as you need
                children: <Widget>[
                  Text(
                    'Home',
                    textAlign: TextAlign.center,
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 50,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  Icon(Icons.home), //change this icon as you need
                ],
              ),
nxagd54h

nxagd54h3#

只需选择Icons.account_circle_rounded,您就会得到一个帐户图标。Like such

相关问题