Question

我试图将图标放置在文本上方而不是文本上方，并且想知道如何最好地做到这一点。我尝试使用“前导：”功能，但这不起作用。

      return Scaffold(
      body: SingleChildScrollView(
        padding:
            EdgeInsets.all(MediaQuery.of(context).size.height / 25),
        child: Container(
          child: Center(
            child: Column(
              children: <Widget>[
                Padding(
                    padding: EdgeInsets.all(
                        MediaQuery.of(context).size.height / 40)),
                Container(
                  height: MediaQuery.of(context).size.height / 3.5,
                  child: SvgPicture.asset(
                      'assets/svg/reading.svg'),
                ),
                Padding(
                    padding: EdgeInsets.all(
                        MediaQuery.of(context).size.height / 40)),
                Icon(FontAwesomeIcons.bolt, color: Colors.orange),
                Text(
                  'On-demand pizza',
                  style: theme.textTheme.body1
                      .copyWith(fontSize: 0.05 * deviceWidth),
                  textAlign: TextAlign.center,
                ),
                Padding(
                    padding: EdgeInsets.all(
                        MediaQuery.of(context).size.height / 80)),
                Icon(FontAwesomeIcons.medal, color: Colors.orange),
                Text(
                  'Outstanding quality',
                  style: theme.textTheme.body1
                      .copyWith(fontSize: 0.05 * deviceWidth),
                  textAlign: TextAlign.center,
                ),

Answer 1

让我尝试一下，您可以按如下所示将图标和文本放在Row小部件中，并将每个Row的mainAxisSize设置为min以将它们居中。

child: Center(
            child: Column(
              children: <Widget>[
                Row(
                  mainAxisSize: MainAxisSize.min, // it won't be centered without this line
                  children: <Widget>[
                    Icon(Icons.face),
                    Text('First'),
                  ],
                ),
                Row(
                  mainAxisSize: MainAxisSize.min,
                  children: <Widget>[
                    Icon(Icons.book),
                    Text('Second'),
                  ],
                ),
              ],
            ),
          ),

Answer 2

为此，您可以将两个小部件都添加到行小部件中，以便它们并排放置。

Row(
children: <Widgets>[
              Text(
                  'Unlimited questions',
                  style: theme.textTheme.body1
                      .copyWith(fontSize: 0.05 * deviceWidth),
                  textAlign: TextAlign.center),
              Icon(FontAwesomeIcons.infinity, 
                color: Colors.orange),
           ]
         );

在文字前放置图标

2 个答案: