在Flutter中如何填充水平空间？

inn6fuwd 于 2022-12-05 发布在 Flutter

关注(0)|答案(5)|浏览(148)

Column(
                      children: [
                        Padding(
                          padding: const EdgeInsets.only(
                              left: 15, bottom: 8, top: 1),
                          child: Row(
                            //crossAxisAlignment: CrossAxisAlignment.start,
                            //mainAxisAlignment: MainAxisAlignment.start,
                            children: [
                              Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  // ITEM NAME
                                  Padding(
                                    padding: const EdgeInsets.only(
                                        left: 10, top: 10),
                                    child: Row(
                                      mainAxisAlignment:
                                          MainAxisAlignment.spaceBetween,
                                      children: [
                                        Text(
                                          '${restaurantItems[i].name}',
                                          style: TextStyle(
                                              fontSize: 17,
                                              color: kTextColor,
                                              fontWeight: FontWeight.w700),
                                        ),
                                        SizedBox(
                                          width: width / 2,
                                        ),

                                        // 'ADD' BUTTON CONTAINER
                                        Container(
                                          decoration: BoxDecoration(
                                            borderRadius:
                                                BorderRadius.circular(8),
                                            color: Colors.black87,
                                          ),
                                          child: Padding(
                                            padding: const EdgeInsets.only(
                                                left: 9,
                                                top: 3,
                                                right: 5,
                                                bottom: 3),
                                            child: InkWell(
                                              splashColor: Colors.white,
                                              onTap: () {
                                                // print(restaurantItems[i].name);
                                                cart.addItem(
                                                  restaurantItems[i].id,
                                                  restaurantItems[i].name,
                                                  restaurantItems[i].price,
                                                  restaurant,
                                                );
                                              },
                                              child: Row(
                                                children: [
                                                  Text(
                                                    'ADD',
                                                    style: TextStyle(
                                                      color: Colors.white,
                                                    ),
                                                  ),
                                                  Icon(
                                                    Icons.add,
                                                    color: Colors.white,
                                                    size: 17,
                                                  ),
                                                ],
                                              ),
                                            ),
                                          ),
                                        ),
                                      ],
                                    ),
                                  ),
                                  Padding(
                                    padding: const EdgeInsets.only(
                                        left: 10, top: 10, bottom: 11),
                                    child: Text(
                                      '₹${restaurantItems[i].price}',
                                      style: TextStyle(
                                          fontSize: 15,
                                          color: kTextColor,
                                          fontWeight: FontWeight.w500),
                                    ),
                                  ),
                                  // Padding(
                                  //   padding: const EdgeInsets.only(
                                  //       left: 17, top: 17),
                                  //   child: InkWell(
                                  //     onTap: () {
                                  //       // Add to Cart
                                  //     },
                                  //     child: Row(
                                  //       children: [
                                  //         Padding(
                                  //           padding:
                                  //               const EdgeInsets.only(left: 15),
                                  //           child: Text(
                                  //             '${restaurantItems[i].quantity} Left',
                                  //             style: TextStyle(
                                  //                 color: kTextLightColor,
                                  //                 fontSize: 13,
                                  //                 fontWeight: FontWeight.w700),
                                  //           ),
                                  //         )
                                  //       ],
                                  //     ),
                                  //   ),
                                  // )
                                ],
                              ),
                            ],
                          ),
                        ),
                      ],
                    ),

如何填充“ITEM NAME”和“ADD CONTAINER”之间的空间？我试过spacer（），但它不起作用。另外，我看过Expanded（）小部件，但由于我是flutter的新手，我似乎无法掌握它。我还添加了Column小部件，因此Spacer（）小部件可能不起作用。如有任何帮助，将不胜感激，谢谢。

flutter

来源：https://stackoverflow.com/questions/66289868/how-can-i-fill-horizontal-space-in-flutter

5条答案

按热度按时间

w9apscun1#

在“ITEM NAME”和“ADD CONTAINER”之间使用SizedBox小工具。例如：

Widget build(BuildContext context) {
    double height = MediaQuery.of(context).size.height;
    double width = MediaQuery.of(context).size.width;
    return Scaffold(
        body: SafeArea(
            child: Padding(
    padding: const EdgeInsets.only(left: 10, top: 10),
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Text(
          'test',
          style: TextStyle(
              fontSize: 17,
              color: Colors.black,
              fontWeight: FontWeight.w700),
        ),
        // Spacer()
        SizedBox(width: width/2,)
        // 'ADD' BUTTON CONTAINER
        Container(
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(8),
            color: Colors.black87,
          ),
          child: Padding(
            padding:
                const EdgeInsets.only(left: 9, top: 3, right: 5, bottom: 3),
            child: InkWell(
              splashColor: Colors.white,
              onTap: () {
                // print(restaurantItems[i].name);
                // cart.addItem(
                //   restaurantItems[i].id,
                //   restaurantItems[i].name,
                //   restaurantItems[i].price,
                //   restaurant,
                // );
              },
              child: Row(
                children: [
                  Text(
                    'ADD',
                    style: TextStyle(
                      color: Colors.white,
                    ),
                  ),
                  Icon(
                    Icons.add,
                    color: Colors.white,
                    size: 17,
                  ),
                ],
              ),
            ),
          ),
        ),
      ],
    ),
  ),));
  }

赞(0）回复(0）举报 2022-12-05

jw5wzhpr2#

为了在小部件之间提供空间，您可以使用SizedBox（width：10）

赞(0）回复(0）举报 2022-12-05

pxiryf3j3#

您需要两个额外的小部件。

body: Row(children: [
        Expanded(                  
            child: Column(children: [  //This is you topmost column. Wrap it with Expanded and then with Row.
          Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: const [Text('ITEM NAME'), TextButton(onPressed:  () {}, child: Text('ADD'))])
        ]))
      ])

赞(0）回复(0）举报 2022-12-05

jdzmm42g4#

如果不想定义宽度大小，请使用Spacer（）填充空间

赞(0）回复(0）举报 2022-12-05

vptzau2j5#

试试这个：

Text(
  '${restaurantItems[i].name}',
  style: TextStyle(
    fontSize: 17,
    color: kTextColor,
    fontWeight: FontWeight.w700,
  ),
),
Spacer(flex: 1),
// 'ADD' BUTTON CONTAINER
Container(
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(8),
    color: Colors.black87,
  ),
  child: Padding(
    padding: const EdgeInsets.only(
      left: 9,
      top: 3,
      right: 5,
      bottom: 3,
    ),
    child: InkWell(
      splashColor: Colors.white,
      onTap: () {
        // print(restaurantItems[i].name);
        cart.addItem(
          restaurantItems[i].id,
          restaurantItems[i].name,
          restaurantItems[i].price,
          restaurant,
        );
      },
      child: Row(
        children: [
          Text(
            'ADD',
            style: TextStyle(
              color: Colors.white,
            ),
          ),
          Icon(
            Icons.add,
            color: Colors.white,
            size: 17,
          ), // Icon
        ], // <Widget>[]
      ), // Row
    ), // InkWell
  ), // Padding
), // Container

Spacer(flex: 4),

赞(0）回复(0）举报 2022-12-05

我来回答

在Flutter中如何填充水平空间？

5条答案

相关问题

热门标签

最新问答