英文:
How to add button to side of container
问题
我正在创建帐户页面的用户界面，其中包含订单列表。我需要在购物篮小部件的右侧添加箭头按钮。我创建了一个包含3行的列，但我不知道如何在右侧添加箭头按钮。
英文:
I am creating UI of account page with order list. I need to add arrow button to right side of basket widget. I created column with 3 rows, but i don't know how to add arrow button to right side.
class BasketItem extends StatelessWidget {
const BasketItem({
super.key,
});
@override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.all(10),
margin: EdgeInsets.symmetric(horizontal: 10, vertical: 2),
height: 95,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(10)
),
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text('#462', style: TextStyle(fontWeight: FontWeight.bold, color: Colors.grey[700]),),
Text('Processing', style: TextStyle(fontWeight: FontWeight.bold, color: Colors.grey[700]),),
],
),
SizedBox(height: 15),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text('299.99', style: TextStyle(fontWeight: FontWeight.bold, color: Colors.grey[700], fontSize: 18),),
Text('2023-09-21', style: TextStyle(fontWeight: FontWeight.bold, color: Colors.grey[700]),),
],
),
SizedBox(height: 5),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text('1 item', style: TextStyle(fontWeight: FontWeight.bold, color: Colors.grey[700]),),
Text('09:31 PM', style: TextStyle(fontWeight: FontWeight.bold, color: Colors.grey[700]),),
],
),
],
),
);
}
}
答案1
得分: 1
以下是您要翻译的代码部分：
Card(
color: Colors.teal,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("#462"),
SizedBox(height: MediaQuery.of(context).size.height * 0.01),
Text("2392"),
SizedBox(height: MediaQuery.of(context).size.height * 0.01),
Text("1 items"),
],
),
SizedBox(width: MediaQuery.of(context).size.width * 0.3),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("Processing"),
SizedBox(height: MediaQuery.of(context).size.height * 0.01),
Text("2020-05-19"),
SizedBox(height: MediaQuery.of(context).size.height * 0.01),
Text("9:34 PM"),
],
),
Icon(Icons.arrow_forward),
],
),
),
)
希望这可以帮助您！
英文:
You can try card and columns for this example. This is the basic way, you can try learnin some another ways. You can change font sizes and spacing between columns.
Card(
color: Colors.teal,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("#462"),
SizedBox(height: MediaQuery.of(context).size.height * 0.01),
Text("2392"),
SizedBox(height: MediaQuery.of(context).size.height * 0.01),
Text("1 items"),
],
),
SizedBox(width: MediaQuery.of(context).size.width * 0.3),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("Processing"),
SizedBox(height: MediaQuery.of(context).size.height * 0.01),
Text("2020-05-19"),
SizedBox(height: MediaQuery.of(context).size.height * 0.01),
Text("9:34 PM"),
],
),
Icon(Icons.arrow_forward),
],
),
),
),
答案2
得分: 0
可以使用ListTile小部件轻松实现这一点。
伪代码
ListTile(
title: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('John Doe'),
Text('john.doe@example.com'),
],
),
trailing: Icon(Icons.arrow_forward),
onTap: () {
// 处理点击事件
},
)
title: 可以接受任何Widget作为子项。您可以在此处替换您现有的代码。
英文:
This can be easily achieved with the help of ListTile Widget..
Sudo code
ListTile(
title: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('John Doe'),
Text('john.doe@example.com'),
],
),
trailing: Icon(Icons.arrow_forward),
onTap: () {
// HANDLE ON TAP
},
),
title: can be take any Widget as a child. You can replace your existing code here..
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论