Flutter学习-08- Flutter学习之常用控件

「这是我参加11月更文应战的第6天，活动概况检查：2021最后一次更文应战」。

1.Text

class textDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    const TextStyle _textStyle = TextStyle(
      fontWeight: FontWeight.bold,//加粗
      fontSize: 16,
      color: Colors.red,
      backgroundColor: Colors.grey,
    );
    return const Text(
      '金樽清酒斗十千，玉盘珍羞直万钱'
      '停杯投箸不能食，拔剑四顾心茫然'
      '欲渡黄河冰塞川，将登太行雪满山.'
      '闲来垂钓碧溪上，忽复乘舟梦日边。'
      '行路难！行路难！多岔路，今安在？'
      '长风破浪会有时⑹，直挂云帆济沧海。',
      style: _textStyle,
    );
  }
}

换行

return const Text(
  ''
  '金樽清酒斗十千，玉盘珍羞直万钱.\n'
      '停杯投箸不能食，拔剑四顾心茫然.\n'
  '欲渡黄河冰塞川，将登太行雪满山.\n'
  '闲来垂钓碧溪上，忽复乘舟梦日边。\n'
  '行路难！行路难！多岔路，今安在？\n'
  '长风破浪会有时⑹，直挂云帆济沧海。\n'
  '',
  style: _textStyle,
);

咱们也能够运用''' 内容'''包裹展现多段，值得注意的是前面的空白也算内容的

return const Text(
      '''
      金樽清酒斗十千，玉盘珍羞直万钱,
      停杯投箸不能食，拔剑四顾心茫然
      欲渡黄河冰塞川，将登太行雪满山.'
      闲来垂钓碧溪上，忽复乘舟梦日边。'
      行路难！行路难！多岔路，今安在？'
      长风破浪会有时⑹，直挂云帆济沧海。''',
  style: _textStyle,
);

咱们剧中展现的话能够运用Container包裹下Text，其次，通过 MediaQuery.of(context).size.width设置内容的宽度，当没有WidgetsApp or MaterialApp的时分，咱们运用MediaQuery.of(context)来获取数据有问题。

    return Container(
      color: Colors.grey,
      child: const Text(
           '金樽清酒斗十千，玉盘珍羞直万钱,\n'
            '停杯投箸不能食，拔剑四顾心茫然.\n'
            '欲渡黄河冰塞川，将登太行雪满山.\n'
'闲来垂钓碧溪上，忽复乘舟梦日边.\n'
'行路难！行路难！多岔路，今安在?\n'
'长风破浪会有时，直挂云帆济沧海.\n',
        textAlign: TextAlign.center,
        style: _textStyle,
      ),
      padding:EdgeInsets.only(top: 50),
      width: MediaQuery.of(context).size.width,
    );
  }
}

咱们在设置下文字的对齐办法，以及间隔顶部50间隔

2. Text.rich

咱们标题一般是大写，作者小写咱们运用Text.rich来表达，运用TextSpan来润饰，咱们能够无限嵌套

class richDemo extends StatelessWidget {
  const richDemo({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Column(
      children:  [
        SizedBox(height: 10,),
       const Text.rich(TextSpan(
         children: [
           TextSpan(text: "《行路难》",style: TextStyle(fontSize: 25,color: Colors.black)),
           TextSpan(text: '__李白',style: TextStyle(fontSize: 16,color: Colors.lightBlue)),
        ],
        ),
    textAlign: TextAlign.center,
    ),
        SizedBox(height: 10,),
        textDemo(),
      ],
    );
  }
}

运行作用，咱们能够调整一下运用SizedBox调整上下间隔，咱们运用Column来作为载体，关于Column后面会介绍。

3. Container

Container的英文是容器的意思，咱们一般用来进行包裹调整间隔的，对于视图有点相似咱们iOS中的view。

class containerDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Icon(Icons.more),
      color: Colors.yellow,
    );
  }
}

一个最简略的container，一般咱们运用child包裹咱们要的内容，这儿他的大小不设置的话默认子视图的大小，这儿就是icon图标的大小。

咱们设置下宽高，较为明显显现出了

• margin 一般来进行外边距的润饰，这儿是这个黄色的container间隔父视图四周都是50

• padding 一般调理该widget的子控件间隔它的内间隔，这儿咱们不运用all，咱们用only结构办法，设置依据自己需求的调整。

4. ListView

ListView相似咱们iOS中的的tableView，有所不同的是在flutter中listview能够水平方向和竖直方向布局，有2种创立办法

4.1 new 的办法创立

new创立的办法item 存放在children数组里边，这样咱们能够创立一些数量不多的item。这样的场景一般是在一些数量比较少的列表中，比如咱们的设置页面，个人中心页面等。相似咱们iOS中静态cell。

class listViewDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return   ListView(
      children:  const[
        ListTile(
          leading: Icon(Icons.home),
          title: Text('home'),
          subtitle:Text('home'),
        ),
        ListTile(
          leading: Icon(Icons.add),
          title: Text('add'),
          subtitle:Text('add'),
        )
        , ListTile(
          leading: Icon(Icons.more),
          title: Text('more'),
          subtitle:Text('more'),
        )
      ],
    );
  }
}

这儿的ListTile是系统供给的快速创立的item的办法，其中leading（主导）、title（文本）、subtitle（副文本）等。 详细 ListTile 的运用细节，能够参阅官方文档 咱们能够运用水平布局

class listViewDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return   ListView(
      scrollDirection: Axis.horizontal,
      itemExtent: MediaQuery.of(context).size.width/4,
      children:  [
        Container(
          color: Colors.red,
        ),
        Container(
          color: Colors.black,
        ),
        Container(
          color: Colors.yellow,
        ),
        Container(
          color: Colors.orange,
        ),
      ],
    );
  }
}

4.2 build办法创立

class listViewDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
   return ListView.builder(
       itemCount: 10,
       itemBuilder: (BuildContext context,int index){
     return ListTile(title:
       Text('标题$index'),);
   });
  }
}

这种咱们界说item，和itemCount

以上就是一些常用的控件，后面咱们在学习项目中再学习。