flutter 列中的空格项

y0u0uwnf  于 2023-06-24  发布在  Flutter
关注(0)|答案(2)|浏览(158)

如果图像看起来与示例相同,我想将右侧的列间隔开,但我已经尝试了所有3个spaceBetween,spaceEvenly和spaceAround,但似乎都不起作用。

这是我为项目写的代码

Widget foodItemCard(BuildContext context, FoodItem prod) {
  return Padding(
    padding: const EdgeInsets.all(8.0),
    child: Container(
      decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(10), color: Colors.white),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Padding(
            padding: const EdgeInsets.only(top: 10, left: 10, bottom: 10),
            child: Image(
              image: AssetImage(prod.imageAddress),
            ),
          ),
          Padding(
            padding: const EdgeInsets.only(left: 20),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(prod.prodName),
                sauceItemList(context, prod.sauceItems),
                Text('${prod.prodPrice} VND')
              ],
            ),
          ),
        ],
      ),
    ),
  );
}

Widget sauceItemList(BuildContext context, List<SauceItem> items) {
  return Column(
    children: List.generate(
        items.length,
        (index) => Row(
              children: [
                Container(
                  height: 15,
                  width: 15,
                  decoration: BoxDecoration(
                      shape: BoxShape.circle, color: Color(items[index].color)),
                ),
                const SizedBox(
                  width: 10,
                ),
                Text(
                  items[index].prodName,
                  style: TextStyle(color: Color(items[index].color)),
                )
              ],
            )),
  );
}
drnojrws

drnojrws1#

您必须使用ExpandedFlexible小部件,让小部件根据flex值占用空间。
完整代码:-

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Box(),
    );
  }
}

class Box extends StatefulWidget {
  const Box({super.key});

  @override
  State<Box> createState() => _BoxState();
}

class _BoxState extends State<Box> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
      child: Padding(
        padding: const EdgeInsets.all(20),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            for (int i = 0; i < 3; i++) ...[
              Row(
                children: [
                  Expanded(
                    flex: 3,
                    child: Container(
                      color: Colors.red[200],
                      height: 150,
                    ),
                  ),
                  const SizedBox(
                    width: 20,
                  ),
                  const Expanded(child: Text("Text")),
                ],
              ),
              const SizedBox(
                height: 20,
              ),
            ]
          ],
        ),
      ),
    ));
  }
}

输出:-

lf5gs5x2

lf5gs5x22#

食物项目卡片中的行会改变其主轴对齐以进行相应调整。例如,要使它居中,请尝试下面的代码

Widget foodItemCard(BuildContext context) {
return Container(
  margin: const EdgeInsets.only(top: 10, left: 10, right: 10),
  decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(10), color: Colors.grey),
  child: Row(
    crossAxisAlignment: CrossAxisAlignment.center,
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Padding(
        padding: const EdgeInsets.only(top: 10, left: 10, bottom: 10),
        child: Container(
          width: 150,
          height: 100,
          decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(10),
              color: Colors.amberAccent),
        ),
      ),
      Padding(
        padding: const EdgeInsets.only(left: 20),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text('sampleProd'),
            sauceItemList(context),
            Text('${200} VND')
          ],
        ),
      ),
    ],
  ),
);

}
---输出为x1c 0d1x

相关问题