如何使响应容器具有相同大小的Flutter

fafcakar 于 2023-02-05 发布在 Flutter

关注(0)|答案(4)|浏览(114)

我有一个制表符字符串列表，并希望给所有制表符相同的宽度，而不是基于文本长度...
就像我有4个标签，它应该占据相同的宽度，如果文本长度大于文本大小应该b调整。
不要使用列表视图，所有选项卡应根据可用宽度进行调整
如宽度为300，制表符为2，则每个制表符的宽度应为150（包括填充等）。
但我得到以下，我不想设置基于文本长度的小部件

，

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

  List<String> titles=['All','Income','Expense','Debt','Others','Liabilities'];

  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
      body: Container(
        height: 100,
        color: Colors.grey,
        child: Row(mainAxisAlignment: MainAxisAlignment.spaceBetween,

children: titles.map((e) => Padding(
          padding: const EdgeInsets.symmetric(horizontal: 2.0),
          child: Container(
              padding: EdgeInsets.symmetric(horizontal: 8,vertical: 4),
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(20),
                color: Colors.white,

              ),
              child: Text(e)),
        )).toList(),),
      ),
    ),
    );
  }
}

flutter

来源：https://stackoverflow.com/questions/75307517/how-to-make-responsive-containers-with-the-same-sized-in-flutter

4条答案

按热度按时间

fdbelqdn1#

将扩展行中的每个子行换行并使用AutoSizeText替换文本https://pub.dev/packages/auto_size_text

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

  final List<String> titles = const [
    'All',
    'Income',
    'Expense',
    'Debt',
    'Others',
    'Liabilities'
  ];

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Container(
          height: 100,
          color: Colors.grey,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: titles
                .map((e) => Expanded(
                      child: Padding(
                        padding: const EdgeInsets.symmetric(horizontal: 2.0),
                        child: Container(
                            height: 24,
                            padding: const EdgeInsets.symmetric(
                                horizontal: 8, vertical: 4),
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(20),
                              color: Colors.white,
                            ),
                            child: AutoSizeText(
                              e,
                              maxLines: 1,
                              textAlign: TextAlign.center,
                            )),
                      ),
                    ))
                .toList(),
          ),
        ),
      ),
    );
  }
}

输出：

赞(0）回复(0）举报 2023-02-05

s5a0g9ez2#

要实现这一点，您可以将每个标签以固定宽度 Package 在容器小部件中，并将父行小部件的mainAxisAlignment属性设置为MainAxisAlignment.spaceBetween。

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: <Widget>[
    Container(
      width: 150.0,
      child: Text("Tab 1"),
    ),
    Container(
      width: 150.0,
      child: Text("Tab 2"),
    ),
    Container(
      width: 150.0,
      child: Text("Tab 3"),
    ),
    Container(
      width: 150.0,
      child: Text("Tab 4"),
    ),
  ],
)

可以根据需要调整容器构件的width属性。如果文本大于容器宽度，则可以使用文本构件的style属性调整文本大小，并将容器构件的overflow属性设置为TextOverflow.ellipsis，以便在文本溢出容器时显示省略号（...）。

赞(0）回复(0）举报 2023-02-05

pexxcrt23#

看一下Boxy，它甚至有一个做你想做的事情的例子（使一系列项的宽度等于最大项的宽度）。

赞(0）回复(0）举报 2023-02-05

lyfkaqu14#

你可以使用LayoutBuilder，这个小部件可以让你得到父小部件的宽度，然后根据它你可以使用N SizedBox来限制你的芯片的宽度。

赞(0）回复(0）举报 2023-02-05