Flutter 卡片布局

问题描述

所以我是新手，我正在尝试制作一张卡片。但我似乎无法得到我想要的输出。

我试图通过使用行和列来分隔不同的小部件，但我一直把它搞砸了。

这是我的目标输出 Target output 这是我目前的进度Current progress

@override
Widget build(BuildContext context) {
return Scaffold(
  appBar: buildhomePageAppBar(),body: buildExhibitorBody(),);
}

Widget buildExhibitorBody() {
return Container(
  child: SingleChildScrollView(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.start,children: [
        buildExhibitorText(),SizedBox(
          height: 10,),buildExhibitorCards(),SizedBox(height: 10),],);
 }

Widget buildhomePageAppBar() {
double profileDimension = 35;
return AppBar(
  backgroundColor: Colors.white,titleSpacing: 0,title: Padding(
    padding: EdgeInsets.only(
      left: 20,child: Row(
      children: [
        Padding(
          padding: EdgeInsets.only(
            top: 5,bottom: 5,child: Image(
            image: Assetimage('assets/images/plain_logo.png'),height: 30,SizedBox(width: 5),Text(
          'Virtex',style: TextStyle(
            color: Colors.black87,fontFamily: 'Poppins',fontSize: 16,fontWeight: FontWeight.bold,)
      ],actions: [
    Padding(
      padding: EdgeInsets.only(
        top: 10,bottom: 10,child: Container(
        height: profileDimension,width: profileDimension,alignment: Alignment.center,decoration: Boxdecoration(
          color: Colors.white,border: Border.all(
            color: Colors.black54,width: 2,borderRadius: BorderRadius.circular(50),child: ClipRRect(
          borderRadius: BorderRadius.circular(50),child: Image(
            width: profileDimension,height: profileDimension,image: Assetimage(
              'assets/images/profile-image.jpeg',fit: BoxFit.cover,SizedBox(width: 20),);
}

Widget buildExhibitorText() {
return Padding(
  padding: EdgeInsets.only(
    left: 20,right: 20,top: 20,child: Container(
    child: new Row(
      mainAxisAlignment: MainAxisAlignment.start,children: <Widget>[
        Expanded(
          child: Text(
            "Exhibitors",textAlign: TextAlign.justify,style: TextStyle(
              fontFamily: "DMSans",letterSpacing: -0.2,fontSize: 20.0,color: Colors.black,fontWeight: FontWeight.w400,);
 }

 Widget buildExhibitorCards() { // I think my problem is I don't kNow how to do the layout here
return Container(
  width: 400,height: 150,child: Column(children: <Widget>[
    Card(
      elevation: 1,child: Padding(
          padding: const EdgeInsets.only(),child: Row(children: [
            buildCardImage(),buildCardExhibitor(),buildCardindustry(),buildCardGo(),])),]),);
 }

 Widget buildCardExhibitor() {
 return Row(mainAxisAlignment: MainAxisAlignment.center,children: [
  Container(
    padding: EdgeInsets.all(10),width: 40,height: 40,child: Center(
      child: Row(
        children: <Widget>[
          Text(
            "EN",style: TextStyle(
              fontSize: 15.0,color: Colors.white,textAlign: TextAlign.center,Text('Exhibitor Name')
        ],decoration: Boxdecoration(
      borderRadius: BorderRadius.all(
        Radius.circular(200),color: Colors.red,]);
}

Widget buildCardImage() {
return Container(
  height: 100,width: 100,child: Image(
    image: Assetimage('assets/images/onboarding-2.jpg'),height: 100,);
}

 Widget buildCardindustry() {
return Padding(
  padding: EdgeInsets.only(
    left: 40,right: 40,children: <Widget>[
        Text(
          "Industry 1",style: TextStyle(
            fontFamily: "DMSans",color: Colors.grey,letterSpacing: 0.3,fontSize: 12,Text(
          "Industry 2",letterSpacing: -0.3,fontWeight: FontWeight.w500,);
  }

  Widget buildCardGo() {
 return Row(mainAxisAlignment: MainAxisAlignment.end,children: [
  Text(
    'Go to Booth',style: TextStyle(
      color: Colors.blue,IconButton(
    icon: Icon(
      MdiIcons.fromString('arrow-right'),size: 30,onpressed: () {
      Navigator.of(context).pop();
    },]);
}
}

我将不胜感激任何形式的帮助。

解决方法

看：

我自己的代码

import 'package:flutter/material.dart';

class CardLayout extends StatelessWidget {
  Widget buildCardImage = Container(
    margin: EdgeInsets.only(right: 10.0),width: 150,height: 150,decoration: BoxDecoration(
      image: DecorationImage(
        fit: BoxFit.fill,image: NetworkImage("https://picsum.photos/250?image=9"),),);

  Widget buildCardExhibitor =
      Row(mainAxisAlignment: MainAxisAlignment.start,children: [
    Container(
      padding: EdgeInsets.all(10.0),decoration: BoxDecoration(
        borderRadius: BorderRadius.all(
          Radius.circular(200),color: Colors.red,child: Text(
        "EN",style: TextStyle(
          fontSize: 15.0,color: Colors.white,fontWeight: FontWeight.bold,textAlign: TextAlign.center,SizedBox(
      width: 10.0,Text(
      'Exhibitor Name',style: TextStyle(
        fontSize: 15.0,color: Colors.black,]);

  Widget buildCardIndustry = Padding(
    padding: EdgeInsets.all(8.0),child: Container(
      child: new Row(
        mainAxisAlignment: MainAxisAlignment.start,children: <Widget>[
          Container(
            padding:
                EdgeInsets.only(left: 10.0,right: 10.0,top: 5,bottom: 5),decoration: BoxDecoration(
              borderRadius: BorderRadius.all(
                Radius.circular(100),color: Colors.blueGrey.shade400,child: Text(
              'Industry 1',style: TextStyle(
                fontFamily: "DMSans",letterSpacing: 0.3,fontSize: 12,SizedBox(
            width: 10.0,Container(
            padding:
                EdgeInsets.only(left: 10.0,child: Text(
              'Industry 2',],);

  Widget buildCardGo = Row(mainAxisAlignment: MainAxisAlignment.end,children: [
    Text(
      'Go to Booth',style: TextStyle(
        color: Colors.blue,fontFamily: 'Poppins',fontSize: 16,SizedBox(width: 3),IconButton(
      icon: Icon(
        Icons.arrow_forward_rounded,size: 30,color: Colors.blue,onPressed: () {
        //Navigator.pop(context);
      },]);

  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
      appBar: AppBar(
        title: Text('Exhibitor'),actions: [
          IconButton(
              icon: Icon(Icons.filter_list_rounded),onPressed: () {
                Navigator.pop(context);
              })
        ],body: Container(
        margin: EdgeInsets.only(top: 10.0),width: MediaQuery.of(context).size.width,//height: 150.0,// remove this line -------------- (1) [EDIT]
        child: Column(
          // wrap card with column and add listtile as children -------------- (2) [EDIT]
          children: [
            ListTile(
              leading: Text('Exhibitor'),trailing: IconButton(
                  icon: Icon(Icons.filter_list_rounded),onPressed: () {
                    Navigator.pop(context);
                  }),Card(
              elevation: 5.0,child: Padding(
                padding: EdgeInsets.all(5.0),child: Row(
                  children: <Widget>[
                    buildCardImage,Expanded(
                        child: Column(
                      children: <Widget>[
                        buildCardExhibitor,buildCardIndustry,buildCardGo
                      ],))
                  ],));
  }
}