Question

大家好，我需要帮助，以使我的个人资料页面看上去像上图一样。我真的不知道如何使它在其中包含如此多的细节。

这是我到目前为止编写的代码：

import 'package:flutter/material.dart';

void main() => runApp(new UserDetails());

class UserDetails extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'User Details',
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.green,
          leading: Icon(Icons.arrow_back),  
          title: Text('Edward',
          style: TextStyle(color: Colors.black),
          ),
          actions: <Widget>[
            Icon(Icons.more_vert, color: Colors.white,),
          ],
      ),
      body: Stack(
        alignment: Alignment.center,
        children: <Widget>[
          Column(
            children: <Widget>[
              Container(
                height: 200.0,
                color: Colors.green,
                child: Center(
                 child: Icon(Icons.person, size: 250.0 ),
                ),
                

              )
            

          ],)
        ]
      ),
      ),
      
    );
  }
}

Answer 1

您可以实现为容器添加边框半径，然后使用“列”来放置和排列文本：在这种情况下为“列”小部件。同样，您还需要将Scaffold中的AppBar设置为与Container相同的背景色，并将仰角设置为零以避免容器上的阴影，如果需要后者的帮助，请告诉我。

    class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      height: 260,
      decoration: BoxDecoration(
        color: Colors.blue,
        borderRadius: BorderRadius.only(
          bottomLeft: Radius.circular(25),
          bottomRight: Radius.circular(25),
        ),
      ),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: <Widget>[
          CircleAvatar(
            backgroundColor: Colors.grey,
            child: Align(
              alignment: Alignment.bottomCenter,
              child: Icon(Icons.people, size: 50),
            ),
            radius: 35,
          ),
          Text("@edward"),
          Text("email@email.com"),
          Text("No: 00X-XXX-XXX"),
        ],
      ),
    );
  }
}

颤振布局背景

1 个答案: