我正试图设计一个学生 Jmeter 板,我想知道如何添加在这个卡小部件的文本(学生,新闻)插入结束蓝色?
dly7yett1#
Container( decoration: BoxDecoration( borderRadius: BorderRadius.circular(12), color: Colors.white, boxShadow: [ BoxShadow( color: Colors.grey.withOpacity(0.5), spreadRadius: 5, blurRadius: 7, offset: Offset(0, 3), ), ], ), child: Column( children: [ Container( child: Icon(Icons.person, size: 24, color:Colors.blueAccent), padding: const EdgeInsets.all(12), ), Container( decoration: const BoxDecoration( color: Colors.blueAccent, borderRadius: BorderRadius.only(bottomRight: Radius.circular(12), bottomLeft: Radius.circular(12)) ), child: Text("Student"), padding: const EdgeInsets.all(12), ) ], ), )
输出:
6jygbczu2#
你可以做
Card( child: Column( children: [ Expanded( flex: 3, child: Container( child: Row( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children:[ //custom widgets Icon(...), Text(...) ] ) ) ), Expanded( child: Container( decoration: BoxDecoration(color: Colors.blue[900]), child: Center( child: Text(...)//custom text and style ) ) ) ] ) );
dldeef673#
Widget getCardItem() { return Center( child: Padding( padding: const EdgeInsets.all(8.0), child: Container( height: 100, width: 105, decoration: BoxDecoration( borderRadius: BorderRadius.circular(12), color: Colors.white, boxShadow: [ BoxShadow( color: Colors.grey.withOpacity(0.5), spreadRadius: 5, blurRadius: 7, offset: Offset(0, 3), ), ], ), child: Column( children: [ Row( mainAxisAlignment: MainAxisAlignment.center, mainAxisSize: MainAxisSize.max, children: [ Container( child: Icon(Icons.supervisor_account, size: 24, color: Colors.blueAccent), padding: const EdgeInsets.all(12), ), Container( child: Text( "2100", style: TextStyle( color: Colors.blueAccent, ), ), padding: const EdgeInsets.all(12), ), ], ), Container( decoration: const BoxDecoration( color: Colors.blueAccent, borderRadius: BorderRadius.only( bottomRight: Radius.circular(12), bottomLeft: Radius.circular(12))), child: Text("Student"), padding: const EdgeInsets.all(12), ) ], ), ), ), ); }
2admgd594#
您可以使用GestureDetector制作可点击的卡片。我们在这里创建了一个非常简单和基本的卡片,您可以添加您想要的更改,并在代码中使用它。
import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import 'package:flutter/widgets.dart'; class CardItem extends StatefulWidget { CardItem({ super.key }); @override State<CardItem> createState() => _CardItemState(); } class _CardItemState extends State<CardItem> { @override Widget build(BuildContext context) { return GestureDetector( onTap: () { print('object'); }, child: Container( margin: const EdgeInsets.only(bottom: 10.0), child: Center( child: Stack( children: [ Image.asset( 'assets/images/orange.jpg', width: MediaQuery.of(context).size.width, height: MediaQuery.of(context).size.height / 2, ), Positioned( bottom: 72, child: Column( children: [ Container( padding: const EdgeInsets.only( top: 28, left: 15, right: 15 ), decoration: BoxDecoration( borderRadius: BorderRadius.circular(12), color: const Color.fromRGBO(249, 249, 249, 0.7), ), width: MediaQuery.of(context).size.width / 1.1, height: MediaQuery.of(context).size.height / 9, margin: const EdgeInsets.only(left: 18), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Row( mainAxisAlignment:MainAxisAlignment.spaceBetween, crossAxisAlignment: CrossAxisAlignment.center, children: const [ Text( 'Orange Juice', style: TextStyle( fontSize: 17, color: Color.fromARGB(255, 58, 54, 54), ), ), Text( '35 Cal', style: TextStyle( fontSize: 13.5, fontFamily: 'YekanRegular', color: Color.fromARGB(255, 58, 54, 54), ), ) ], ), ], ), ), ], ), ), ], ), ), ), ); }}
4条答案
按热度按时间dly7yett1#
输出:
6jygbczu2#
你可以做
dldeef673#
2admgd594#
您可以使用GestureDetector制作可点击的卡片。我们在这里创建了一个非常简单和基本的卡片,您可以添加您想要的更改,并在代码中使用它。