如何在Flutter的BasketItem容器右侧添加箭头按钮

要在BasketItem组件右侧添加箭头按钮，只需调整布局结构，将原有Column嵌套进Row中，让Column占据左侧空间，右侧放置箭头组件即可。

修改后的完整代码如下：

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)
      ),
      // 将原Column改为Row，实现左右布局
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          // 用Expanded让原有Column占据左侧全部剩余空间
          Expanded(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              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]),),
                  ],
                ),
              ],
            ),
          ),
          // 添加右侧箭头按钮，可根据需求换成IconButton添加点击事件
          Icon(Icons.arrow_forward_ios, color: Colors.grey[700], size: 16,)
        ],
      ),
    );
  }
}

关键修改说明： #

• 将Container的子组件从Column改为Row，实现左右分栏布局
• 原有Column外层包裹Expanded，确保它占据Row左侧的全部剩余空间，箭头按钮固定在右侧
• 在Row的最后添加箭头组件，这里用了Icon，如果需要点击事件，可替换为IconButton
• 给Column设置mainAxisAlignment: MainAxisAlignment.center，让内部内容垂直居中，保持布局美观

内容的提问来源于stack exchange，提问作者Hazmatik