相关疑难解决方法(0)

网络图像适合卡片而不会丢失卡片形状,在颤动中具有网格视图

在想要的视图中,有一个两列的网格列表,它的项目设计需要在卡片的背景中设置一个图像,卡片有一定的半径,图像是网络图像,但卡片大小会根据网络图像而波动。我也试过这个,但没有用。

这是代码

Container(
  child: Column(
  children: <Widget>[
       Expanded(
                    child: Card(
                        clipBehavior: Clip.antiAlias,
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(10.0),
                        ),
                        child: ClipRRect(
                          borderRadius: BorderRadius.circular(10.0),
                          child: Image.network(
                            event_response.imageLogoUrl +
                                event_response.eventList[position].event_logo,
                            fit: BoxFit.cover,
                          ),
                        )),
                  ),
                          Container(
                           padding: const EdgeInsets.all(5.0),
                           child  :Text('${event_response.eventList[position].eventName}'),
                        )
                      ],

                );},),),],),);
Run Code Online (Sandbox Code Playgroud)

在这里,我想要但在 2 列中。

在此处输入图片说明

在这里我得到

在此处输入图片说明

android dart material-design flutter

6
推荐指数
1
解决办法
4296
查看次数

颤振卡的顶部半径被图像覆盖

当我向卡中添加图像时,卡顶部的半径被覆盖。我该如何解决?

当我向卡中添加图像时,卡顶部的半径被覆盖。我该如何解决?

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(primarySwatch: Colors.yellow),
      home: Scaffold(
          backgroundColor: Colors.grey[200],
          appBar: AppBar(title: Text('Demo'),),
          body: SizedBox(
              height: 310.0,
              child: Card(
                elevation: 3.0,
                color: Colors.white,
                margin: EdgeInsets.all(8.0),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    SizedBox(height: 0.0,),
                    Image.network('https://img.zcool.cn/community/012157578c405f0000012e7e69e7cd.jpg@1280w_1l_2o_100sh.jpg'),
                    SizedBox(height: 16.0,),
                    Row(
                      children: <Widget>[
                        SizedBox(width: 16.0,),
                        Text('??', style: Theme.of(context).textTheme.headline,),
                        SizedBox(width: 16.0,),
                        Text('????', style: Theme.of(context).textTheme.subhead,),
                      ],
                    ),
                    SizedBox(height: 16.0,),
                  ],
                ),
              ))),
    );
  }
}
Run Code Online (Sandbox Code Playgroud)

这是渲染

在此处输入图片说明

flutter flutter-layout

5
推荐指数
3
解决办法
2104
查看次数

标签 统计

flutter ×2

android ×1

dart ×1

flutter-layout ×1

material-design ×1