This is the sixth day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021.
1.Text
class textDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
const TextStyle _textStyle = TextStyle(
fontWeight: FontWeight.bold,/ / bold
fontSize: 16,
color: Colors.red,
backgroundColor: Colors.grey,
);
return const Text(
'Ten thousand gold bottles of sake bucket, jade plate treasure shame straight ten thousand money'
'Stop the cup, cast chopsticks can't eat, draw the sword, look around the heart at a loss'
'To cross the Yellow River ice jam sichuan, will climb taihang snow full mountain.'
'Idle fishing on the green stream, suddenly back in a boat dreaming of the sun. '
'Difficult road! On the difficult! Many different roads, now where? '
'The wind and waves will be at times ⑹ hanging clouds and sails to the sea. ', style: _textStyle, ); }}Copy the code
A newline
return const Text(
' '
'Jinzun sake bucket ten thousand, jade plate zhen Shame straight ten thousand money.\n'
'Stop cup cast zhu can't eat, draw sword four gu Heart at a loss.\n'
'If you want to cross the Yellow River with ice, you will climb taihang with snow.' \n'
'Idle fishing on the green stream, suddenly back in a boat dreaming of the sun. \n'
'Difficult road! On the difficult! Many different roads, now where? \n'
'The wind and waves will be at times ⑹ hanging clouds and sails to the sea. \n'
' ',
style: _textStyle,
);
Copy the code
' ' 'content' ' 'The package shows multiple segments, notably the front oneblankAlso count content
return const Text(
"Golden bottles of sake bucket ten thousand, jade plate treasure straight ten thousand money, stop the cup to cast chopsticks can't eat, draw a sword to look around the heart at a loss to cross the Yellow River with ice, will ascend taihang snow mountain. 'Difficult road! On the difficult! Many different roads, now where? 'The wind and waves will be at times ⑹ hanging clouds and sails to the sea. ' ' ',
style: _textStyle,
);
Copy the code
Second, set the width of the content by mediaQuery.of (context).size. Width. When there is no WidgetsApp or MaterialApp, We had a problem using mediaQuery.of (context) to get the data.
return Container(
color: Colors.grey,
child: const Text(
'Golden bottle sake bucket ten thousand, jade plate treasure shame straight ten thousand money,\n'
'Stop cup cast zhu can't eat, draw sword four gu Heart at a loss.\n'
'If you want to cross the Yellow River with ice, you will climb taihang with snow.' \n'
'Idle fishing on the green stream, suddenly back in a boat dreaming of the sun.
'Difficult road! On the difficult! Many different roads, now where? \n'
'Long wind and waves will sometimes, straight sail to the sea.\n',
textAlign: TextAlign.center,
style: _textStyle,
),
padding:EdgeInsets.only(top: 50), width: MediaQuery.of(context).size.width, ); }}Copy the codeWe’re setting the alignment of the text below, and 50 distances from the top
2. Text.rich
We usually use uppercase title, lowercase author we use text.rich, we use TextSpan, we can nest it indefinitely
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: "The Road is Hard.",style: TextStyle(fontSize: 25,color: Colors.black)),
TextSpan(text: '__ li bai',style: TextStyle(fontSize: 16,color: Colors.lightBlue)),
],
),
textAlign: TextAlign.center,
),
SizedBox(height: 10,), textDemo(), ], ); }}Copy the code
SizedBoxAdjust the upper and lower spacing we useColumnTo serve as a vehicle forColumnThat will be explained later.
3. Container
Container is the English word for Container. We usually use it to adjust the spacing of packages, which is similar to view in iOS.
class containerDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
returnContainer( child: Icon(Icons.more), color: Colors.yellow, ); }}Copy the codeFor the simplest container, we usually use a Child to wrap the content we want. The default size of the child view is the size of the icon icon.
- margin
It’s usually done with margins, so here’s this yellow container that’s 50 away from the superview
- padding
Usually adjust the spacing between the widget’s child controls and its internal distance. Instead of using all, we use the only constructor, setting the adjustment to suit our needs.
4. ListView
A ListView is similar to a tableView in iOS, except that a ListView can be created horizontally or vertically in a flutter
4.1 New creation mode
The way new is created is that the items are in the Children array, so we can create a few items. This scenario is usually in a small number of lists, such as our Settings page, personal center page, etc. This is similar to static cells in iOS.
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'), a)],); }}Copy the code
ListTileIs the way the system provides to quickly create items, whereleading(leading),title(text), subtitle (secondary text), etc. For details on the use of ListTile, please refer toThe official documentationWe can use horizontal layout
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, ), ], ); }}Copy the code
4.2 Creating a Vm in Build Mode
class listViewDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ListView.builder(
itemCount: 10,
itemBuilder: (BuildContext context,int index){
return ListTile(title:
Text('title$index')); }); }}Copy the codeIn this case we define item and itemCount
