编辑

它切断了我的背景渐变并且不显示图像。

我需要一个 flutter 布局，左边是一列文本对象，右边是图像。我在 flutter.io 网站上找到了一张示例图片，但他们没有显示这个特定示例的代码。我对数据列进行了格式化，但无法弄清楚如何将图像添加到右侧。

这是我试图明智布局的图片。

这是我现有的代码，在图像右侧包含我们想要的数据

    class MemberProfile extends StatelessWidget {
   @override
    Widget build(BuildContext context) {
   return Scaffold(
    appBar:  LBAppBar().getAppBar(),
    drawer:  LBDrawer().getDrawer(),
     body: 
      Container(
        decoration: BoxDecoration(
          gradient: LinearGradient(
            colors: [Color.fromRGBO(1, 89, 99, 1.0), Colors.grey],
            begin: Alignment.bottomLeft,
            end: Alignment.topRight,
          ),
        ),
        child:     
         Container(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Container(
                margin: EdgeInsets.only(top: 10.0, bottom: 10.0, left: 20.0),
                child: Text("Name : Sam Cromer",
                    style: TextStyle(
                        color: Colors.white70,
                        fontWeight: FontWeight.bold,
                        fontSize: 19.0)),
              ),
              Container(
                  margin: EdgeInsets.only(top: 10.0, bottom: 10.0, left: 20.0),
                  child: Text("Sex : Male",
                      style: TextStyle(
                          color: Colors.white70,
                          fontWeight: FontWeight.bold,
                          fontSize: 19.0))),
              Container(
                  margin: EdgeInsets.only(top: 10.0, bottom: 10.0, left: 20.0),
                  child: Text("Age : 42",
                      style: TextStyle(
                          color: Colors.white70,
                          fontWeight: FontWeight.bold,
                          fontSize: 19.0))),
              Container(
                  margin: EdgeInsets.only(top: 10.0, bottom: 10.0, left: 20.0),
                  child: Text("Status : Divorced",
                      style: TextStyle(
                          color: Colors.white70,
                          fontWeight: FontWeight.bold,
                          fontSize: 19.0))),
              Container(
                  margin: EdgeInsets.only(top: 10.0, bottom: 10.0, left: 20.0),
                  child: Text("Trumatic Event : ",
                      style: TextStyle(
                          color: Colors.white70,
                          fontWeight: FontWeight.bold,
                          fontSize: 19.0))),
              Container(
                  margin: EdgeInsets.only(top: 10.0, bottom: 10.0, left: 20.0),
                  child: Text("Motorcycle Accident July 2005, TBI",
                      style: TextStyle(
                          color: Colors.white70,
                          fontWeight: FontWeight.bold,
                          fontSize: 19.0))),
              Container(
                  margin: EdgeInsets.only(top: 10.0, bottom: 10.0, left: 20.0),
                  child: Text("Bio :",
                      style: TextStyle(
                          color: Colors.white70,
                          fontWeight: FontWeight.bold,
                          fontSize: 19.0))),
              Container(
                margin: EdgeInsets.only(
                    left: 30.0, top: 150.0, bottom: 30.0, right: 30.0),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.end,
                  children: <Widget>[
                    Container(
                      margin: EdgeInsets.all(20.0),
                      child: OutlineButton(
                        child: Text('Offer support'),
                        textColor: Colors.white,
                        shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(30.0)),
                        onPressed: () {
                          // Navigator.of(context).push( MaterialPageRoute(builder: (BuildContext context) =>  CheckInQ()));
                        },
                      ),
                    )
                  ],
                ),
              )
            ],
          ),

        ),
        //here
      ),

);
  }
}

最佳答案

这是您的 MemberProfile 类，已修改为包含如上图所示布局的一个自定义行:

     class MemberProfile extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
     return Scaffold(
     body: Container(
        decoration: BoxDecoration(
          gradient: LinearGradient(
            colors: [Color.fromRGBO(1, 89, 99, 1.0), Colors.grey],
            begin: Alignment.bottomLeft,
            end: Alignment.topRight,
          ),
        ),
        width: MediaQuery.of(context).size.width,
        height: 200.0,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget> [
              Column(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[

                  Text("Name : Sam Cromer",
                      style: TextStyle(
                          color: Colors.white70,
                          fontWeight: FontWeight.bold,
                          fontSize: 19.0)),

                  Text("Sex : Male",
                      style: TextStyle(
                          color: Colors.white70,
                          fontWeight: FontWeight.bold,
                          fontSize: 19.0)),
                  Text("Age : 42",
                      style: TextStyle(
                          color: Colors.white70,
                          fontWeight: FontWeight.bold,
                          fontSize: 19.0)),
                  Text("Status : Divorced",
                      style: TextStyle(
                          color: Colors.white70,
                          fontWeight: FontWeight.bold,
                          fontSize: 19.0)),
                  Text("Trumatic Event : ",
                      style: TextStyle(
                          color: Colors.white70,
                          fontWeight: FontWeight.bold,
                          fontSize: 19.0)),
                  Text("Motorcycle ",
                      style: TextStyle(
                          color: Colors.white70,
                          fontWeight: FontWeight.bold,
                          fontSize: 19.0)),
                  Text("Bio :",
                      style: TextStyle(
                          color: Colors.white70,
                          fontWeight: FontWeight.bold,
                          fontSize: 19.0)),

                ],
              ),
              Column(
                children: <Widget>[

                  SizedBox(
                    width: 200.0,
                    height: 200.0,
                    child: Image.asset('assets/images/test.jpg'), // Your image widget here
                  ),

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

此处给出的代码将行的高度限制为200.0，因此图像的大小不会扭曲行的总体布局，您可以选择另一种方法是将 Image 小部件放入具有固定 width 和 height 的 SizedBox。

gradient 被cut off 的原因是因为它被definition 应用于父级Container 和容器中。 “根据 child 的大小调整自己”，所以如果你想让你的“渐变效果”填满整个屏幕，你必须设置明确的 width 和 height:

   body: 
  Container(
    width: MediaQuery.of(context).size.width,
    height: MediaQuery.of(context).size.height,
    decoration: BoxDecoration(

关于dart - 有 2 个 child 的行，一列和一个图像布局在 flutter 中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54725769/