减小Flutter扩展项目中的间距

dm7nw8vv 于 2023-03-19 发布在 Flutter

关注(0)|答案(2)|浏览(132)

我正试图减少周围的空间扩大在我的Flutter项目，因为它是采取了大量的空间在各个方向。
我有2个扩展的文本在他们和2个形式的输入从用户。他们正在采取几乎3行浪费白色。我试图减少间距尽可能通过aligning向左，但它仍然显示相同的。
我最初尝试将它们放在一个表中，但没有成功，因为我有builder在里面。下面是简化的代码：

Builder(builder: (context) {
  return Container(
    width: double
        .infinity, // Set the width of the container to be as wide as possible
    child: SingleChildScrollView(
      child: Column(
        children: [
          Card(
            child: Row(
              children: [
                Expanded(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Row(
                        mainAxisAlignment: MainAxisAlignment.start,
                        children: const [
                          Text('No.'),
                        ],
                      ),
                    ],
                  ),
                ),
                Expanded(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Row(
                        mainAxisAlignment: MainAxisAlignment.start,
                        children: const [
                          Text('No.'),
                        ],
                      ),
                    ],
                  ),
                ),
                Expanded(
                  child: Column(
                    children: const [
                      Text('New Log'),
                    ],
                    crossAxisAlignment: CrossAxisAlignment.start,
                  ),
                ),
              ],
            ),
          ),
          Card(
            child: Row(
              children: [
                Expanded(
                  child: Column(
                    children: [
                      Text('1'),
                    ],
                  ),
                ),
                Expanded(
                  child: Column(
                    children: [
                      Text('12'),
                    ],
                  ),
                ),
                Form(
                  child: Expanded(
                    child: Column(
                      children: [
                        TextFormField(),
                        TextFormField(),
                        OutlinedButton(
                          onPressed: () async {},
                          child: _selectedButtons.contains(1)
                              ? const Icon(FluentSystemIcons
                                  .ic_fluent_checkmark_circle_filled)
                              : const Icon(FluentSystemIcons
                                  .ic_fluent_checkmark_circle_regular),
                        ),
                      ],
                    ),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    ),
  );
});

以下是当前的结果：

以下是所需的结果：

我的问题：我怎样才能减少空间，在扩大，使所有在同一行。

flutter

来源：https://stackoverflow.com/questions/75752277/reducing-spacing-in-an-expanded-in-flutter-project

2条答案

按热度按时间

t5fffqht1#

您已经使用了太多的嵌套行和列，这是多余的。检查下面的代码与屏幕截图您想要的结果。

class HomeScreen extends StatelessWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Container(
          padding: const EdgeInsets.all(10),
          width: double.infinity, // Set the width of the container to be as wide as possible
          child: SingleChildScrollView(
            child: Column(
              children: [
                Card(
                  child: Row(
                    children: const [
                      Expanded(
                        flex: 1,
                        child: Text('No.', textAlign: TextAlign.center,),
                      ),
                      Expanded(
                        flex: 2,
                        child: Text('No.', textAlign: TextAlign.center,),
                      ),
                      Expanded(
                        flex: 4,
                        child: Text('New Log'),
                      ),
                    ],
                  ),
                ),
                Card(
                  child: Padding(
                    padding: const EdgeInsets.only(bottom: 8.0, right: 8.0),
                    child: Row(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: [
                        const Expanded(
                          flex: 1,
                          child: Text('1', textAlign: TextAlign.center,),
                        ),
                        const Expanded(
                          flex: 2,
                          child: Text('12', textAlign: TextAlign.center,),
                        ),
                        Expanded(
                          flex: 4,
                          child: Form(
                            child: Row(
                              children: [
                                Expanded(flex:2, child: TextFormField()),
                                const Spacer(),
                                Expanded(flex: 2, child: TextFormField()),
                                const Spacer(),
                                ElevatedButton(style: ElevatedButton.styleFrom(
                                  elevation: 5,
                                  backgroundColor: Colors.white,
                                  shape: RoundedRectangleBorder(
                                    side: const BorderSide(color: Colors.grey),
                                    borderRadius: BorderRadius.circular(10),
                                  ),
                                ),onPressed: () {}, child: const Icon(Icons.check_circle, color: Colors.grey,))
                              ],
                            ),
                          ),
                        )
                        // Form(
                        //   child: Expanded(
                        //     child: Column(
                        //       children: [
                        //         TextFormField(),
                        //         TextFormField(),
                        //         OutlinedButton(
                        //           onPressed: () async {},
                        //           child: Icon(Icons.check),
                        //         ),
                        //       ],
                        //     ),
                        //   ),
                        // ),
                      ],
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

赞(0）回复(0）举报 2023-03-19

yc0p9oo02#

对于TextFiled，您需要使用Row而不是Column。

Form(
  child: Expanded(
    child: Row(
      children: [
        Expanded(child: TextFormField()),
        SizedBox(width: 8),
        Expanded(child: TextFormField()),
      ],
    ),
  ),
),

并且可以删除单个项目的顶层嵌套小部件，如Row>Expanded>Column。

赞(0）回复(0）举报 2023-03-19

我来回答

减小Flutter扩展项目中的间距

2条答案

相关问题

热门标签

最新问答